Free, tested & ready to use examples!
AnyExample.com
 
Web anyexample.com
 

IE7 JavaScript prompt() alternative

abstract 
By default Internet Explorer 7.0 disables standard JavaScript prompt() function due to security reasons. Although users can enable this function again it's very unlikely that they will do so. This article presents alternative javascript function ae_prompt which displays fancy transparently shaded CSS-based prompt dialog and works with any modern browser including IE7.
compatible 
  • Internet Explorer 6.x, 7.x
  • Opera 8.x, 9.x
  • Mozilla Firefox
  • Apple Safari
  • other modern DOM/CSS-compatible browsers
  • prompt() function displays popup dialog with a short text message, text-field for user input, OK and Cancel buttons. prompt() is a blocking function: script execution is stopped while it waits for user input.

    Basically, prompt function uses two arguments: prompt message and default value. It returns string entered by user or null, if user pressed 'Cancel' button.

    You can see classic prompt function example (if your browser still supports it). Compare to our custom ae_prompt() function example page.

    Usage of our ae_prompt() function is slightly different: as a self-written JavaScript function could not block entire script execution, we have to use function callbacks. First argument of ae_prompt function is a function reference: this function will be called after user clicks OK or Cancel. Dialog result(user input or null) will be passed as a callback function argument. Other ae_prompt() arguments are the same: prompt message and default value.

    Here is ae_prompt JavaScript source code:

    source code: JavaScript
     
    <script type="text/javascript">
    // This is variable for storing callback function 
    var ae_cb = null;
     
    // this is a simple function-shortcut 
    // to avoid using lengthy document.getElementById 
    function ae$(a) { return document.getElementById(a); } 
     
    // This is a main ae_prompt function 
    // it saves function callback  
    // and sets up dialog 
    function ae_prompt(cb, q, a) { 
    	ae_cb = cb;
    	ae$('aep_t').innerHTML = document.domain + ' question:';
    	ae$('aep_prompt').innerHTML = q;
    	ae$('aep_text').value = a;
    	ae$('aep_ovrl').style.display = ae$('aep_ww').style.display = '';
    	ae$('aep_text').focus();
    	ae$('aep_text').select();
    } 
     
    // This function is called when user presses OK(m=0) or Cancel(m=1) button 
    // in the dialog. You should not call this function directly. 
    function ae_clk(m) { 
    	// hide dialog layers  
    	ae$('aep_ovrl').style.display = ae$('aep_ww').style.display = 'none';
    	if (!m)  
    		ae_cb(null);  // user pressed cancel, call callback with null 
    	else 
    		ae_cb(ae$('aep_text').value); // user pressed OK  
    } 
    </script>
     

    Here is dialog CSS styles. We use transparent shading while displaying dialog, that's why there are some IE-specific code:

    source code: CSS
    <style type="text/css">
    #aep_ovrl { 
    background-color: black;
    -moz-opacity: 0.7; opacity: 0.7;
    top: 0; left: 0; position: fixed;
    width: 100%; height:100%; z-index: 99;
    } 
    #aep_ww { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 100%; text-align: center;} 
    #aep_win { margin: 20% auto 0 auto; width: 400px; text-align: left;} 
    #aep_w {background-color: white; padding: 3px; border: 1px solid black; background-color: #EEE;} 
    #aep_t {color: white; margin: 0 0 2px 3px; font-family: Arial, sans-serif; font-size: 10pt;} 
    #aep_text {width: 100%;} 
    #aep_w span {font-family: Arial, sans-serif; font-size: 10pt;} 
    #aep_w div {text-align: right; margin-top: 5px;} 
    </style>
    <!-- IE specific code: -->
    <!--[if lte IE 7]> 
    <style type="text/css"> 
    #aep_ovrl { 
    position: absolute; 
    filter:alpha(opacity=70); 
    top: expression(eval(document.body.scrollTop)); 
    width: expression(eval(document.body.clientWidth)); 
    } 
    #aep_ww {  
    position: absolute;  
    top: expression(eval(document.body.scrollTop));  
    } 
    </style> 
    <![endif]-->		
     

    And finally, here is ae_prompt dialog HTML code. You should insert it right after <body...> tag.

    source code: HTML
    <!-- ae_prompt HTML code -->
    <div id="aep_ovrl" style="display: none;">&nbsp;</div>
    <div id="aep_ww" style="display: none;">
    <div id="aep_win"><div id="aep_t"></div>
    <div id="aep_w"><span id="aep_prompt"></span>
    <br /><input type="text" id="aep_text" onKeyPress=
    "if((event.keyCode==10)||(event.keyCode==13)) ae_clk(1); if (event.keyCode==27) ae_clk(0);">
    <br><div><input type="button" id="aep_ok" onclick="ae_clk(1);" value="OK">
    <input type="button" id="aep_cancel" onclick="ae_clk(0);" value="Cancel">
    </div></div>
    </div>
    </div>
    <!-- ae_prompt HTML code -->	
    

    To use ae_prompt function, you should insert into your page all these three parts: JavaScript, CSS and HTML. Insert JS and CSS code to <head> page block.

    See our complete ae_prompt example page and it's sources.



    warning 
  • You cannot simply change prompt() to ae_prompt() calls in your existing code: use callback functions to process ae_prompt() output
  • tested 
  • Internet Explorer 6.0
  • Internet Explorer 7.0
  • Mozilla Firefox 2.0
  • Opera 9.10
  • Apple Safari 2.0.4
  •  


     
    © AnyExample 2010-2013
    License | Privacy | Contact