• Thursday , 21 September 2017

Custom Confirm Box Programming JavaScript CSS Tutorial

Code Canyon



Lesson Code: http://www.developphp.com/video/JavaScript/Custom-Confirm-Box-Programming-Tutorial
Learn to create custom confirm boxes using core JavaScript and CSS. We supply handy tips for using the custom confirm box to perform specific operations via Ajax. We also show how to externalize your JS and CSS for improved modularity and compartmentalization. This tutorial follows the custom alert box programming tutorial, which individuals should view if they wish to fully comprehend code applied to this tutorial.

Original source

3d Ocean

Related Posts

24 Comments

  1. OMER FARUK Bulgak
    June 29, 2017 at 17:41

    <button onclick="Confirm.yes(''+op+'',''+id+'')">Yes</button>
    I just didnt understand why we put + sign before and after references inside the parenthesis? Great tutorial by the way

  2. Roman B
    June 29, 2017 at 17:41

    Question: can i use this to pause form submission until I click yes or no without stopping it completely and then artificially re-submit it using JS ?

  3. DEVIL GAMES
    June 29, 2017 at 17:41

    you are god

  4. Jason Hardy
    June 29, 2017 at 17:41

    Good stuff, enjoy your style of explaining things. Very easy to follow without dumbing down too much.

  5. Heinrich Olivier
    June 29, 2017 at 17:41

    Amazing tute thanks Adam!

  6. riberycr7
    June 29, 2017 at 17:41

    with that video i understood what AJAX is thks again!!!!

  7. juan carlos ticona mamani
    June 29, 2017 at 17:41

    muy bueno gracias

  8. Alomgir Hossain
    June 29, 2017 at 17:41

    Anybody use is this custom confirm box to delete records from the database after click yes button. I am struggling with that. Please if possible help me. Thanks. 

  9. Sydney Sid
    June 29, 2017 at 17:41

    Which software did you use? notepad?/

  10. Joseph John
    June 29, 2017 at 17:41

    i am creating a confirm just like yours but i like to use onload !! and have a link if the user click yes how am i going to do this??

  11. Ghen Papong
    June 29, 2017 at 17:41

    instead of deleting, how can i change the function into just navigating to other tabs in my website?
    Thanks in Advance..
    Nice Tutorial 🙂

  12. Alomgir Hossain
    June 29, 2017 at 17:41

    Dear sir, it is really nice and useful tutorial. Thanks. But i have a question is how can i use it to delete specific data from mysql database dynamically instead of removing child ?  Please help me. 

  13. Petro Wolke
    June 29, 2017 at 17:41

    This works really nice, thank you very much! 
    I added a function that automatically clicks "OK" when pressing the return-key and I fit the CSS. 
    The only thing I don't like is on screen size change.
    Do you have an idea how to dynamically change the position/size onScreenSizeChange (or something like that)?

  14. Osama Ahmed
    June 29, 2017 at 17:41

    +Adam Khoury is there way to do it like … 
    var x = Confirm.render(……)
    if(x==true) …. else …….
    and the confirmation message should return boolean 

  15. henri231000
    June 29, 2017 at 17:41

    My delete buttons aren't working and I've wrote all of the JavaScript code based on this video. Can anyone help? Here is my JavaScript code:

    // JavaScript Document
    function CustomAlert() {
        this.render = function(dialog) {
            var winW = window.innerWidth;
            var winH = window.innerHeight;
            var dialogoverlay = document.getElementById('dialogoverlay');
            var dialogbox = document.getElementById('dialogbox');   
            dialogoverlay.style.display = "block";
            dialogoverlay.style.height = winH+"px";
            dialogbox.style.left = (winW/2) – (550 * .5)+"px";
            dialogbox.style.top = "100px";
            dialogbox.style.display = "block";  
            document.getElementById('dialogboxhead').innerHTML = "Acknowledge This Message";
            document.getElementById('dialogboxbody').innerHTML = dialog;
            document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Alert.ok()">OK</button>';
            
        }
        this.ok = function() {
            document.getElementById('dialogbox').style.display = "none";
            document.getElementById('dialogoverlay').style.display = "none";  
        
        }
    }
    var Alert = new CustomAlert();
    function deletePost(id) {
             var db_id = id.replace("post_", "");
             document.body.removeChild(document.getElementById(id) );
    }
    function CustomConfirm() {
        this.render = function(dialog,op,id) {
            var winW = window.innerWidth;
            var winH = window.innerHeight;
            var dialogoverlay = document.getElementById('dialogoverlay');
            var dialogbox = document.getElementById('dialogbox');   
            dialogoverlay.style.display = "block";
            dialogoverlay.style.height = winH+"px";
            dialogbox.style.left = (winW/2) – (550 * .5)+"px";
            dialogbox.style.top = "100px";
            dialogbox.style.display = "block";
              
            document.getElementById('dialogboxhead').innerHTML = "Confirm that action";
            document.getElementById('dialogboxbody').innerHTML = dialog;
            document.getElementById('dialogboxfoot').innerHTML ='<button onclick="Confirm.yes(''+op+'',''+id+'')">Yes</button><button onclick="Confirm.no()">No</button>';
            
        }
        this.no = function() {
            document.getElementById('dialogbox').style.display = "none";
            document.getElementById('dialogoverlay').style.display = "none";  
        
        }
        this.yes = function(op,id) {
            if(op == "delete_post") {
                deletePost(id);
            }
            document.getElementById('dialogbox').style.display = "none";
            document.getElementById('dialogoverlay').style.display = "none";
            
        }
    }
    var Confirm = new CustomConfirm();         

  16. Collin Robinson
    June 29, 2017 at 17:41

    hey Admin can you do some tutorials on php framework thank you

  17. Shahed Jamal
    June 29, 2017 at 17:41

    Thanks for your tutorials.
    Your step by step website building tutorials are awesome.
    Can you upload step by step tutorial for "SEARCH ENGINE".

  18. yannis art
    June 29, 2017 at 17:41

    After practicing for awhile with this amazing code, I came up with a question, something similar to Ben Stuijts's point just with a different approach. Instead of asking the "yes" function to do something and then adding several "else if", couldn't the code just return true (yes) or false (no) and then we can handle the situation as we see fit regarding the instance which requires the confirmation? Sometimes a confirmation is required through javascript (I mean not directly from a button or link). Excuse my english and please, please, please bear with me if the question is stupid, I'm an old man but so young to this coding thing 🙂 Thanks in advance

  19. yannis art
    June 29, 2017 at 17:41

    Once again, Thank You so much Adam for another interesting and useful tutorial. God Bless you!

  20. Sabir Kothiya
    June 29, 2017 at 17:41

    And Product order form in HTML using JavaScript. Please

  21. Sabir Kothiya
    June 29, 2017 at 17:41

    Please could you make a video of shopping cart in HTML, using JavaScript

  22. enima iffets
    June 29, 2017 at 17:41

    Gr8 

  23. Ben Stuijts
    June 29, 2017 at 17:41

    Nice video, maybe an idea for improvement: instead of sending an operation to the yes method, why not sending the name of the function? By doing this the yes method do not need adjustments (check for op) everytime a new confirmation action is required.

  24. MrJontyJohn
    June 29, 2017 at 17:41

    Cheers … Great that you explain each step in so much detail, very helpful for JavaScript noons like myself

Leave A Comment

You must be logged in to post a comment.