Custom Alert Box Programming JavaScript CSS HTML Tutorial




Lesson Code: http://www.developphp.com/video/JavaScript/Custom-Alert-Box-Programming-Tutorial
JavaScript comes equipped with stock dialog boxes that work well enough for alerting, confirming, and prompting for values. But most of the top interactive websites create their own custom dialog windows. Creating these windows yourself gives you more control over the interaction with the user, and allows you to customize every single aspect of the dialog window. In this first video lesson we will cover creating a dynamic custom alert box dialog from scratch. In the two following videos we will cover confirm and prompt boxes.

Original source


34 responses to “Custom Alert Box Programming JavaScript CSS HTML Tutorial”

  1. it did not work for me b4 but i sort it out my self all you have to do is put your " Dialogoverlay " div after dilogbox div and go to javascript on message of document.getElementById('dialogboxbody').innerHTML = "you look pretty today"; change it instead of dialog

  2. Hello. I need your help. hope i can receive a reply from you. so where can i edit the font style of the ok button ? i don't know where to find it. that's my problem. hope you notice me

  3. These are the best tutorials once you get past the basics that I have come across!
    These tutorials alone it appears will propel me to an advanced level and with almost no heartburn!

  4. I really like your videos, and the Source cdoe. They are simply awesome, I've been looking for this for so long and finally I found some one that I can learn something from.
    Thanks for sharing.

  5. Thx for this tutorial!
    A little bit compact with jquery. And more clearly as for me.

    function CustomAlert(){
    this.render = function(dialog){
    var winW = $(window).width(); var winH = $(window).height();
    $('#dialogoverlay').css ({'display' : 'block', 'height' : winH + 'px' });
    $('#dialogbox').css ({'left' : (winW/2) – (550 * .5) + 'px', 'top' : '100px', 'display' : 'block' });
    $('#dialogboxhead').html('Acknowledge This Message"');
    $('#dialogboxfoot').html('<button onclick="Alert.ok()">OK</button>')}
    this.ok = function(){
    $('#dialogbox, #dialogoverlay ').css ({'display' : 'none'});}}
    var Alert = new CustomAlert();

Leave a Reply