Custom Confirm Box Programming JavaScript CSS Tutorial




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


24 responses to “Custom Confirm Box Programming JavaScript CSS Tutorial”

  1. 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. 

  2. 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)?

  3. 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();         

  4. 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

  5. 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.

Leave a Reply