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”
THX great turtorial
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
Your code is absolutely clean and effective. Thank…
Hey hi can we make an alert that pops on its own when the window loads?
Thanks man!
thank you for the code it was very helpfull thnx again
good tutorial ,,,, thanks
Thanks
will this work with an on page load event that will only load once?
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
How do I run the Alert.render('You look very pretty today.') in a php boolean? Thanks
Hey Adam,
How do I turn the scroll off on the overlay when the custom dialog box is open?
Thanks. Very nice tutorial.
works very well..Thank you so much
thank yooouuu!!!!
gracias amigo
It dose not work !!!!!!!
Actually Sorry. I spoke too soon. I'll sub to make it up to you.
It doesn't work!!! FUCK UP!!!!!!! BITCH!!!!!!!
When in "(winW/2) – (550 * .5)+"px"
Can't you just do (winW/2) – 225 + "px"? Because 550 x .5 = 225.
good fob bro, that was very helpful 😀
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!
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?
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.
how to draw a line dynamically when user reach at certain height on the web page using css and javascript
I don't understand why you need this in "this.render" and "this.ok". Please tell me…
Finally a very very good video on how to make a alert box thnks
That's kinda alot for ONE single custom alert button…..
thank you soo much brooooooo….
Thanks a lot!! 😀
Very clear and well explained! Thanks
thanks…..!!! Your videos were really helpful.. 🙂
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?.
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();