Custom Confirm Box Programming JavaScript CSS Tutorial

Lesson Code: http://www.developphp.com/view.php?tid=1385 Learn to create custom confirm boxes using core JavaScript and CSS. We supply handy tips for using t…

Don’t forget to check out our other video tutorials or share this video with a friend.

0 votes

Loading... 4,237 views

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

1. Adam Khoury says:

   17/10/2014 at 5:27 pm

   Reply
2. Sid boruett says:

   17/10/2014 at 5:39 pm

   Which software did you use? notepad?/

   Reply
3. Joseph John says:

   17/10/2014 at 6:23 pm

   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??

   Reply
4. Ghen Papong says:

   17/10/2014 at 7:10 pm

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

   Reply
5. Alomgir Hossain says:

   17/10/2014 at 7:30 pm

   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. 

   Reply
6. Petro Wolke says:

   17/10/2014 at 8:02 pm

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

   Reply
7. Osama Ahmed says:

   17/10/2014 at 8:32 pm

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

   Reply
8. Alex Magableh says:

   17/10/2014 at 8:43 pm

   Reply
9. Ben Stuijts says:

   17/10/2014 at 9:02 pm

   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.

   Reply
10. henri231000 says:

    17/10/2014 at 9:08 pm

    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 = ‘OK‘;

    }
    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 =’YesNo‘;

    }
    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(); 

    Reply
11. MrJontyJohn says:

    17/10/2014 at 9:09 pm

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

    Reply
12. enima iffets says:

    17/10/2014 at 9:36 pm

    Gr8 

    Reply
13. danutz0501 says:

    17/10/2014 at 10:06 pm

    Reply
14. Sabir Kothiya says:

    17/10/2014 at 10:23 pm

    And Product order form in HTML using JavaScript. Please

    Reply
15. yannis art says:

    17/10/2014 at 11:06 pm

    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

    Reply
16. Collin Robinson says:

    17/10/2014 at 11:34 pm

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

    Reply
17. Shahed Jamal says:

    18/10/2014 at 12:30 am

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

    Reply
18. Sabir Kothiya says:

    18/10/2014 at 12:47 am

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

    Reply
19. yannis art says:

    18/10/2014 at 1:19 am

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

    Reply