Return to Snippet

Revision: 34694
at November 24, 2010 07:13 by mattvbiggs


Updated Code
//First, create a div (or container) that will be the body of your popup
<div id="confirmDialog" style="font: 10pt verdana;color: Red;font-weight: bold;">
Are you sure you want to save? There's no going back after this!
</div>

//Next, define the properties of your popup.
$('#confirmDialog').dialog({
    modal: true,
    autoOpen: false,
    title: "Confirm Changes",
    width: 400,
    position: [300, 250],
    buttons: {
        Save: function() {
          $(this).dialog("close");  
          Save();
        },
        Cancel: function() {
          $(this).dialog("close");
        }
    }
});

//Finally, open the dialog fired from an event.
$('#MySaveButton').click(function() {
    $('#confirmDialog').dialog("open");
});

Revision: 34693
at October 27, 2010 07:23 by mattvbiggs


Updated Code
//First, create a div (or container) that will be the body of your popup
<div id="confirmDialog" style="font: 10pt verdana;color: Red;font-weight: bold;">
Are you sure you want to save? There's no going back after this!
</div>

//Next, define the properties of your popup.
$('#confirmDialog').dialog({
    modal: true,
    autoOpen: false,
    title: "Confirm Changes",
    width: 400,
    position: [300, 250],
    buttons: {
        Save: function() {
          $(this).dialog("close");  
          Save();
        },
        Cancel: function() {
          $(this).dialog("close");
        }
    }
});

//Finally, open the dial fired from an event.
$('#MySaveButton').click(function() {
    $('#confirmDialog').dialog("open");
});

Revision: 34692
at October 27, 2010 05:58 by mattvbiggs


Initial Code
//First, create a div (or container) that will be the body of your popup
<div id="confirmDialog" style="font: 10pt verdana;color: Red;font-weight: bold;">
Are you sure you want to save? There's no going back after this!
</div>

//Next, define the properties of your popup.
$('#confirmDialog').dialog({
    modal: true,
    autoOpen: false,
    title: "Confirm Changes",
    width: 400,
    position: [300, 250],
    buttons: {
        Save: function() {
          $(this).dialog("close");          
        },
        Cancel: function() {
          $(this).dialog("close");
        }
    }
});

//Finally, open the dial fired from an event.
$('#MySaveButton').click(function() {
    $('#confirmDialog').dialog("open");
});

Initial URL


Initial Description
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.

Initial Title
JQuery: Confirmation Popup

Initial Tags


Initial Language
jQuery