Posted By

mattvbiggs on 10/27/10


Tagged


Versions (?)

Who likes this?

7 people have marked this snippet as a favorite

luman
dekehooper
kwameboame
Tyster
superman
mmcachran
jillella


JQuery: Confirmation Popup


 / Published in: jQuery
 

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.

  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  

You need to login to post a comment.