Lesson Code: http://www.developphp.com/video/JavaScript/Custom-Confirm-Box-Programming-Tutorial
Learn to create custom confirm boxes using core JavaScript and CSS. We supply handy tips for using the custom confirm box to perform specific operations via Ajax. We also show how to externalize your JS and CSS for improved modularity and compartmentalization. This tutorial follows the custom alert box programming tutorial, which individuals should view if they wish to fully comprehend code applied to this tutorial.
Original source
24 responses to “Custom Confirm Box Programming JavaScript CSS Tutorial”
<button onclick="Confirm.yes(''+op+'',''+id+'')">Yes</button>
I just didnt understand why we put + sign before and after references inside the parenthesis? Great tutorial by the way
Question: can i use this to pause form submission until I click yes or no without stopping it completely and then artificially re-submit it using JS ?
you are god
Good stuff, enjoy your style of explaining things. Very easy to follow without dumbing down too much.
Amazing tute thanks Adam!
with that video i understood what AJAX is thks again!!!!
muy bueno gracias
Anybody use is this custom confirm box to delete records from the database after click yes button. I am struggling with that. Please if possible help me. Thanks.
Which software did you use? notepad?/
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??
instead of deleting, how can i change the function into just navigating to other tabs in my website?
Thanks in Advance..
Nice Tutorial 🙂
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.
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)?
+Adam Khoury is there way to do it like …
var x = Confirm.render(……)
if(x==true) …. else …….
and the confirmation message should return boolean
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 = '<button onclick="Alert.ok()">OK</button>';
}
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 ='<button onclick="Confirm.yes(''+op+'',''+id+'')">Yes</button><button onclick="Confirm.no()">No</button>';
}
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();
hey Admin can you do some tutorials on php framework thank you
Thanks for your tutorials.
Your step by step website building tutorials are awesome.
Can you upload step by step tutorial for "SEARCH ENGINE".
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
Once again, Thank You so much Adam for another interesting and useful tutorial. God Bless you!
And Product order form in HTML using JavaScript. Please
Please could you make a video of shopping cart in HTML, using JavaScript
Gr8
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.
Cheers … Great that you explain each step in so much detail, very helpful for JavaScript noons like myself