JQuery Blockui Plugin Demo 5 (Simple Modal Dialog Example)

Simple Modal Dialog Example

This page demonstrates how to display a simple modal dialog. The button below would invoke with blockUI a custom message. Depending upon the user response (yes or no) an Ajax call would be a made while keeping the UI blocked.

The following code is used on this page:

<Scripttype= "Text/javascript">$ (document). Ready (function() {          $('#test'). Click (function() {$.blockui ({message: $ ('#question'), CSS: {width:'275px' } });          }); $('#yes'). Click (function() {             //Update the block message$.blockui ({message:" Call in progress..." }); $.ajax ({URL:'wait.php', Cache:false, Complete:function() {                     //unblock when remote call returns$.unblockui ();         }             });          }); $('#no'). Click (function() {$.unblockui (); return false;      }); }); </Script>  ...  <inputID= "Test"type= "Submit"value= "Show Dialog" />  ...  <DivID= "question"style= "Display:none; Cursor:default">         <H1>Would to contine?</H1>         <inputtype= "button"ID= "Yes"value= "Yes" />         <inputtype= "button"ID= "No"value= "No" /> </Div>

For full-featured modal dialog support, check out simple modal by Eric Martin or Jqmodal by Brice Burgess.

Reference: http://malsup.com/jquery/block/#overview

JQuery Blockui Plugin Demo 5 (Simple Modal Dialog Example)