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.


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.