jQuery Modal Prompt

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.

Modal PromptThe 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>  

Andrew Pallant (@LdnDeveloper) has been a web, database and desktop developer for over 16 years. Andrew has worked on projects that ranged from factory automation to writing business applications. Most recently he has been heavily involved in various forms for ecommerce projects. Over the years Andrew has worn many hats: Project Manager, IT Manager, Lead Developer, Supervisor of Developers and many more - See more at: http://www.unlatched.com/#sthash.8DiTkpKy.dpuf

Posted in Design, Developement, jQuery, Web Tagged with:
0 comments on “jQuery Modal Prompt
1 Pings/Trackbacks for "jQuery Modal Prompt"
  1. […] Easy jQuery Modal Prompt:  http://andrewpallant.com/wordpress/jquery-modal-prompt/ […]

Leave a Reply

Your email address will not be published. Required fields are marked *

*