Show dynamic dialog box using JQuery

jQuery ui

Dialog box is commonly used user interface for the web development, especially to show the action information to the user. Some time we need to show the dialog box with dynamic content, you can get some idea from the below example.

The demo demonstrate how to implement a jQuery dialog modal that will contain the content according button type.

Demo

Source Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>show dynamic dialog box in jquery</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
      <script type="text/javascript">
        $(function() {
            $("input:button").click(function() {
                var NewDialog;
                var _id = $(this).attr('id');
                if (_id == "Button1") {
                    NewDialog = $('<div class="popup" title="Save item">\
          Item has been saved successfully!</div>');
                }
                else if (_id == "Button2") {
                    NewDialog = $('<div class="popup" title="Update item">\
          Item has been updated successfully!</div>');
                }
                else if (_id == "Button3") {
                    NewDialog = $('<div class="popup" title="Delete item">\
          Item has been deleted successfully!</div>');
                }
                NewDialog.dialog({
                    resizable: false,
                    modal: true,
                    show: 'clip',
                    buttons: {
                        "Ok": function() {
                            $(this).dialog("close");
                        }
                    }
                });
            });
        });
</script>
 </head>
<body>
<center>
<div style="width:400px;height:400px"> 
<input id="Button1" type="button" value="Save" />
<input id="Button2" type="button" value="Update" />
<input id="Button3" type="button" value="Delete" /></div></center>
</body>
</html>