• Tuesday , 12 December 2017

Custom Alert Box Programming JavaScript CSS HTML Tutorial

Code Canyon



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

3d Ocean

Related Posts

34 Comments

  1. the batcher
    July 5, 2017 at 17:54

    THX great turtorial

  2. raj p
    July 5, 2017 at 17:54

    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

  3. jfamy080
    July 5, 2017 at 17:54

    Your code is absolutely clean and effective. Thank…

  4. abcd
    July 5, 2017 at 17:54

    Hey hi can we make an alert that pops on its own when the window loads?

  5. UpsidedownMen
    July 5, 2017 at 17:54

    Thanks man!

  6. rina nina
    July 5, 2017 at 17:54

    thank you for the code it was very helpfull thnx again

  7. Mahmoud Hassan
    July 5, 2017 at 17:54

    good tutorial ,,,, thanks

  8. Spencer Pittman
    July 5, 2017 at 17:54

    Thanks

  9. Alen Tomasevic
    July 5, 2017 at 17:54

    will this work with an on page load event that will only load once?

  10. Raven Araga
    July 5, 2017 at 17:54

    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

  11. Franky_fg
    July 5, 2017 at 17:54

    How do I run the Alert.render('You look very pretty today.') in a php boolean? Thanks

  12. Jacob Burkhart
    July 5, 2017 at 17:54

    Hey Adam,

    How do I turn the scroll off on the overlay when the custom dialog box is open?

  13. maya ahmed
    July 5, 2017 at 17:54

    Thanks. Very nice tutorial.

  14. Veeravignesh KR
    July 5, 2017 at 17:54

    works very well..Thank you so much

  15. UglyOneBeYou
    July 5, 2017 at 17:54

    thank yooouuu!!!!

  16. Julio Alvarado
    July 5, 2017 at 17:54

    gracias amigo

  17. oraib idghaim
    July 5, 2017 at 17:54

    It dose not work !!!!!!!

  18. X Tower 026
    July 5, 2017 at 17:54

    Actually Sorry. I spoke too soon. I'll sub to make it up to you.

  19. X Tower 026
    July 5, 2017 at 17:54

    It doesn't work!!! FUCK UP!!!!!!! BITCH!!!!!!!

  20. Smiley Guy
    July 5, 2017 at 17:54

    When in "(winW/2) – (550 * .5)+"px"

    Can't you just do (winW/2) – 225 + "px"? Because 550 x .5 = 225.

  21. Przemo Pigoń
    July 5, 2017 at 17:54

    good fob bro, that was very helpful 😀

  22. Phil Jarone
    July 5, 2017 at 17:54

    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!

  23. aravind buddha
    July 5, 2017 at 17:54

    Excellent. Thought i'm trying to achieve native confirm box
    how to do.

    var result = confirm("Are you ready?");

    the result should be either true or false.

    Is it possible in JavaScript?

  24. Luigi68mx
    July 5, 2017 at 17:54

    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.

  25. Alok Kumar
    July 5, 2017 at 17:54

    how to draw a line dynamically when user reach at certain height on the web page using css and javascript

  26. Smiley Guy
    July 5, 2017 at 17:54

    I don't understand why you need this in "this.render" and "this.ok". Please tell me…

  27. riberycr7
    July 5, 2017 at 17:54

    Finally a very very good video on how to make a alert box thnks

  28. Smiley Guy
    July 5, 2017 at 17:54

    That's kinda alot for ONE single custom alert button…..

  29. MJ MikzZ Jos
    July 5, 2017 at 17:54

    thank you soo much brooooooo….

  30. Killer Gorilla
    July 5, 2017 at 17:54

    Thanks a lot!! 😀

  31. Rob van Hal
    July 5, 2017 at 17:54

    Very clear and well explained! Thanks

  32. Adrita Barari
    July 5, 2017 at 17:54

    thanks…..!!! Your videos were really helpful.. 🙂

  33. chandra sek
    July 5, 2017 at 17:54

    Hi Adam,
    Nice video. But custom buttons are not working in IE 10 browser. any thing we need to add to the code to make it work?.

  34. SALAT PRODUCTION
    July 5, 2017 at 17:54

    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 Comment

You must be logged in to post a comment.