Andrew Pallant

Today I am going to demonstrate how easy it is to integrate a stylish modal prompt.  It takes a very little amount of code and can be easily slipped into any web page that you may be working on.  The look of it is easily tweaked in a simple CSS file.  The triggers to show the prompt is some very basic jQuery.

The nuts and bolts of it can be broken down to 2 DIV elements.  One DIV element for the background to grey out the main page.  The second DIV element is the actually prompt.  I like to use a DIV element to grey out the main page as it is one layer above and it blocks the click of buttons and links, but yet allows you to know you have not left the page.  This example has been tested in all modern browsers and has been known to work well.

Click to: Run the Sample
Click to: Download Full Source of the Sample

Sneak Peak at the Code:

 <div id="backgroundDiv"></div>  
   <div id="promptDiv">  
     <br />Deleting this record is permanent.<br/><br/>  
     <strong>Are You Sure?</strong><br/><br/>  
     <p style="text-align: center;">
          <input type="button" style="" id="btnYes" value="Yes"/><input type="button" id="btnNo" value="No"/>
     </p>  
   </div>  

   <script type="text/javascript">  
     // Set Up Scripts Required For This Demonstation  
     $(document).ready(function () {  
       // Show Prompt  
       $('#btnTest').click(function() {  
         $('#backgroundDiv').fadeTo("fast", 0.5);  
         $('#promptDiv').show();  
       });  
       // Yes Button  
       $('#btnYes').click(function () {  
         alert('Record Deleted');  
         $('#backgroundDiv').hide();  
         $('#promptDiv').hide();  
       });  
       // No Button  
       $('#btnNo').click(function () {  
         alert('Record Deletion Cancelled');  
         $('#backgroundDiv').hide();  
         $('#promptDiv').hide();  
       });  
     });  
   </script>