www.webdeveloper.com
Results 1 to 9 of 9

Thread: Replacing the javascript "alert"

  1. #1
    Join Date
    Mar 2005
    Posts
    79

    Replacing the javascript "alert"

    I want to replace the standard "alert" pop-up and found some code on the web that allows you to do just that. The code works for a single pop-up alert but I have some php scripts that need to be able to send multiple alerts, one after the other. This works fine if using the standard javascript alert function but not if I use the modified alert function. Can anyone suggest how I could modify the code below which is being used to replace the "alert" so that I can use it to send several alerts from the same script, one after the other ?

    Code:
    // constants to define the title of the alert and button text.
    var ALERT_TITLE = "Alert message!";
    var ALERT_BUTTON_TEXT = "Ok";
    
    // over-ride the alert method only if this a newer browser.
    // Older browser will see standard alerts
    if(document.getElementById) {
    	window.alert = function(txt) {
    		createCustomAlert(txt);
    	}
    }
    
    function createCustomAlert(txt) {
    	// shortcut reference to the document object
    	d = document;
    
    	// if the modalContainer object already exists in the DOM, bail out.
    	if(d.getElementById("modalContainer")) return;
    
    	// create the modalContainer div as a child of the BODY element
    	mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
    	mObj.id = "modalContainer";
    	 // make sure its as tall as it needs to be to overlay all the content on the page
    	mObj.style.height = document.documentElement.scrollHeight + "px";
    
    	// create the DIV that will be the alert 
    	alertObj = mObj.appendChild(d.createElement("div"));
    	alertObj.id = "alertBox";
    	// MSIE doesnt treat position:fixed correctly, so this compensates for positioning the alert
    	if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px";
    	// center the alert box
    	alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";
    
    	// create an H1 element as the title bar
    	h1 = alertObj.appendChild(d.createElement("h1"));
    	h1.appendChild(d.createTextNode(ALERT_TITLE));
    
    	// create a paragraph element to contain the txt argument
    	msg = alertObj.appendChild(d.createElement("p"));
    	msg.appendChild(d.createTextNode(txt));
    
    	// create an anchor element to use as the confirmation button.
    	btn = alertObj.appendChild(d.createElement("a"));
    	btn.id = "closeBtn";
    	btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
    	btn.href = "#";
    	// set up the onclick event to remove the alert when the anchor is clicked
    	btn.onclick = function() { removeCustomAlert();return false; }
    
    	
    }
    
    // removes the custom alert from the DOM
    function removeCustomAlert() {
    	document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));
    }

  2. #2
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    don't know if this can help, but you can place multiple alert one after another:
    alert(text)
    alert(text)
    ....
    alert(text)
    and so on.

    why you want to override the alert function with a custom one??
    my mom is javascript, dad is javascripter, granpa is javascriptor, and my little sister is javasRidiculous.
    my nature language is javascript, then come spanish and english -- me

  3. #3
    Join Date
    Mar 2005
    Posts
    79
    Quote Originally Posted by ZeroKilled
    don't know if this can help, but you can place multiple alert one after another:
    alert(text)
    alert(text)
    ....
    alert(text)
    and so on.

    why you want to override the alert function with a custom one??
    I know how to call multiple alerts, that's not my problem. Why I want to use custom alerts is not relevant, I have my reasons. Can anyone help with my original question ?

  4. #4
    Join Date
    Aug 2007
    Location
    Apartment
    Posts
    175
    Yeah, I don't like it either when people question what I'm doing, but I think ZeroKilled's intention is to help.

    I think your problem is this line
    Code:
    // if the modalContainer object already exists in the DOM, bail out.
    	if(d.getElementById("modalContainer")) return;
    Try this:
    Code:
    // constants to define the title of the alert and button text.
    var ALERT_TITLE = "Alert message!";
    var ALERT_BUTTON_TEXT = "Ok";
    
    // over-ride the alert method only if this a newer browser.
    // Older browser will see standard alerts
    if(document.getElementById) {
    	window.alert = function(txt) {
    		createCustomAlert(txt);
    	}
    }
    var c=0;
    function createCustomAlert(txt) {
    	// shortcut reference to the document object
    	d = document;
    
    
    	// create the modalContainer div as a child of the BODY element
    	mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
    	var count=c++
    	mObj.id = "modalContainer"+count;
    	 // make sure its as tall as it needs to be to overlay all the content on the page
    	mObj.style.height = document.documentElement.scrollHeight + "px";
    
    	// create the DIV that will be the alert 
    	alertObj = mObj.appendChild(d.createElement("div"));
    	alertObj.id = "alertBox";
    	// MSIE doesnt treat position:fixed correctly, so this compensates for positioning the alert
    	if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px";
    	// center the alert box
    	alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";
    
    	// create an H1 element as the title bar
    	h1 = alertObj.appendChild(d.createElement("h1"));
    	h1.appendChild(d.createTextNode(ALERT_TITLE));
    
    	// create a paragraph element to contain the txt argument
    	msg = alertObj.appendChild(d.createElement("p"));
    	msg.appendChild(d.createTextNode(txt));
    
    	// create an anchor element to use as the confirmation button.
    	btn = alertObj.appendChild(d.createElement("a"));
    	btn.id = "closeBtn";
    	btn.href="#"
    	btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
    	// set up the onclick event to remove the alert when the anchor is clicked
    	btn.onclick = function() { document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"+count))}
    
    	
    }
    Bob Saget.

  5. #5
    Join Date
    Oct 2006
    Posts
    150
    The problem with this script is that it's nothing like an actual alert box. It will not block the script while waiting for the user to say ok.
    For example, if you write
    Code:
    alert('I will now redirect you to Google. Press ok to continue.');
    location = 'http://www.google.com';
    the code will in fact not wait for the user to rpess ok, because the script is non-blocking.
    bals28mjk is right about which line is causing the problem, however, removing it will do no good. Either the script will cause an error, or you'll get all the boxes on top of each other, with the one you created last, at the top.
    There are only 10 kinds of people in the world, those who don't understand binary, those who do, and those who know other number bases than 2, 10 and 16.
    Things you should know about my replies: I usually don't test code before I post it. I use bold text for key words like document.getElementsByTagName.
    Blog: Gameboy Genius
    If you're happy with my response, say thanks. If not, ask again.

  6. #6
    Join Date
    Mar 2005
    Posts
    79
    Quote Originally Posted by nitro2k01
    The problem with this script is that it's nothing like an actual alert box. It will not block the script while waiting for the user to say ok.
    For example, if you write
    Code:
    alert('I will now redirect you to Google. Press ok to continue.');
    location = 'http://www.google.com';
    the code will in fact not wait for the user to rpess ok, because the script is non-blocking.
    bals28mjk is right about which line is causing the problem, however, removing it will do no good. Either the script will cause an error, or you'll get all the boxes on top of each other, with the one you created last, at the top.
    Yes you're right, I'd already tried removing that line before I posted and it does exactly what you say which would be OK except when you close one of the boxes they all get closed. The difference is that the alert suspends code execution whereas this doesn't. I was wondering if there was some way of calling the routine and passing a parameter so that a different DIV was created each time ?

    ...

  7. #7
    Join Date
    Oct 2006
    Posts
    150
    You could use a callback function, but that's a little different from how alert usually works.

    Code:
    // constants to define the title of the alert and button text.
    var ALERT_TITLE = "Alert message!";
    var ALERT_BUTTON_TEXT = "Ok";
    
    // over-ride the alert method only if this a newer browser.
    // Older browser will see standard alerts
    if(document.getElementById) {
    	window.alert = function(txt, callback) {
    		createCustomAlert(txt, callback);
    	}
    
    }
    
    function createCustomAlert(txt, callback) {
    	// shortcut reference to the document object
    	d = document;
    
    
    	// if the modalContainer object already exists in the DOM, bail out.
    	if(d.getElementById("modalContainer")) return;
    
    	// create the modalContainer div as a child of the BODY element
    	mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
    
    	mObj.id = "modalContainer";
    
    	 // make sure its as tall as it needs to be to overlay all the content on the page
    	mObj.style.height = document.documentElement.scrollHeight + "px";
    
    
    
    	// create the DIV that will be the alert
    	alertObj = mObj.appendChild(d.createElement("div"));
    	alertObj.id = "alertBox";
    	// MSIE doesnt treat position:fixed correctly, so this compensates for positioning the alert
    	if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px";
    	// center the alert box
    	alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";
    
    	// create an H1 element as the title bar
    	h1 = alertObj.appendChild(d.createElement("h1"));
    	h1.appendChild(d.createTextNode(ALERT_TITLE));
    
    	// create a paragraph element to contain the txt argument
    	msg = alertObj.appendChild(d.createElement("p"));
    	msg.appendChild(d.createTextNode(txt));
    
    	// create an anchor element to use as the confirmation button.
    	btn = alertObj.appendChild(d.createElement("a"));
    	btn.id = "closeBtn";
    	btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
    	btn.href = "#";
    	// set up the onclick event to remove the alert when the anchor is clicked
    	btn.onclick = function() {
    		removeCustomAlert();
    		if (callback)
    			callback();
    
    		return false; }
    
    
    }
    
    // removes the custom alert from the DOM
    function removeCustomAlert() {
    	document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));
    }
    
    // Test it
    
    alert("1", next1);
    
    function next1(){
    	alert("2", next2);
    }
    
    function next2(){
    	alert("3 (Last)");
    }
    
    There are only 10 kinds of people in the world, those who don't understand binary, those who do, and those who know other number bases than 2, 10 and 16.
    Things you should know about my replies: I usually don't test code before I post it. I use bold text for key words like document.getElementsByTagName.
    Blog: Gameboy Genius
    If you're happy with my response, say thanks. If not, ask again.

  8. #8
    Join Date
    Mar 2005
    Posts
    79
    Thanks nitro2k01, that's exactly what I was after .. really appreciate your help with it!

  9. #9
    Join Date
    Jan 2008
    Posts
    1
    I have a requirement where, when user clicks submit button, i need to popup a custom dialog, and only when user clicks ok, then the form has to submitted.

    I think, in the example given above, this is not possible.. Any idea, how to wait till the user has clicked submit button?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles