Custom Confirm Box Programming JavaScript CSS Tutorial

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.

1 Star2 Stars3 Stars4 Stars5 Stars 0 votes
Loading... 3,626 views





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

  1. Adam Khoury says:
  2. Sid boruett says:

    Which software did you use? notepad?/

  3. Joseph John says:

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

  4. Ghen Papong says:

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

  5. Alomgir Hossain says:

    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. 

  6. Petro Wolke says:

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

  7. Osama Ahmed says:

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

  8. Alex Magableh says:
  9. Ben Stuijts says:

    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.

  10. henri231000 says:

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

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

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

  11. MrJontyJohn says:

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

  12. enima iffets says:

    Gr8 

  13. danutz0501 says:
  14. Sabir Kothiya says:

    And Product order form in HTML using JavaScript. Please

  15. yannis art says:

    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

  16. Collin Robinson says:

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

  17. Shahed Jamal says:

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

  18. Sabir Kothiya says:

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

  19. yannis art says:

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

Leave a Reply to Sabir Kothiya Cancel reply

Your email address will not be published. Required fields are marked *