Advanced Search

JQuery: Confirmation Popup

/ Published in: jQuery
Save to your folder(s)
The following snippet is a good start to setting up custom dialogs for a web page. This uses the .dialog() function from the JQuery UI libraries. The simplicity of this code is just one of the ways JQuery makes the UI slick.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. //First, create a div (or container) that will be the body of your popup
  2. <div id="confirmDialog" style="font: 10pt verdana;color: Red;font-weight: bold;">
  3. Are you sure you want to save? There's no going back after this!
  4. </div>
  5.  
  6. //Next, define the properties of your popup.
  7. $('#confirmDialog').dialog({
  8.     modal: true,
  9.     autoOpen: false,
  10.     title: "Confirm Changes",
  11.     width: 400,
  12.     position: [300, 250],
  13.     buttons: {
  14.         Save: function() {
  15.           $(this).dialog("close");  
  16.           Save();
  17.         },
  18.         Cancel: function() {
  19.           $(this).dialog("close");
  20.         }
  21.     }
  22. });
  23.  
  24. //Finally, open the dialog fired from an event.
  25. $('#MySaveButton').click(function() {
  26.     $('#confirmDialog').dialog("open");
  27. });

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.