Advanced Search

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