Menu ▼



Posted By :
avatarmrkraju
Total Views : 4284

jQuery Modal Dialog Popup Control Example.

This example will shows you how to use jQuery Dialog/Popup control.

  • Example 1 : Basic popup dialog.



    function ShowSampleDialog() {
        $("#divdialog").dialog();
    }



  • Example 2 : Popup modal dialog. It will disable the background controls.



    function ShowSampleModalDialog() {
        $("#divmodaldialog").dialog({
            modal: true
        });
    }



  • Example 3 : Popup modal dialog by restricting closing the popup when "Esc" key press. In above two examples popup will be closed when "Esc" key pressed.



    function ShowSampleModalDialogEsc() {
        $("#divDialogNoEsc").dialog({
            modal: true,
            closeOnEscape: false
        });
    }
Source Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="Stylesheet"
        type="text/css" />
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script language="javascript">
        function ShowSampleDialog() {
            $("#divdialog").dialog();
        }
        function ShowSampleModalDialog() {
            $("#divmodaldialog").dialog({
                modal: true
            });
        }
        function ShowSampleModalDialogEsc() {
            $("#divDialogNoEsc").dialog({
                modal: true,
                closeOnEscape: false
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="button" value="Sample Dialog" onclick="ShowSampleDialog();" />
        <div id="divdialog" title="JQuery Popup Dialog Sample" style="display: none;">
            Sample JQuery UI Dialog.
        </div>
        <br />
        <br />
        <input type="button" value="Sample Modal Dialog" onclick="ShowSampleModalDialog();" />
        <div id="divmodaldialog" title="Modal Dialog Sample" style="display: none;">
            Backgound will be disabled in this example.
        </div>
        <br />
        <br />
        <input type="button" value="Sample Dialog" onclick="ShowSampleModalDialogEsc();" />
        <div id="divDialogNoEsc" title="Modal Dialog Sample" style="display: none;">
            Backgound will be disabled in this example. and this popup will not be closed when
            "Esc" key pressed.
        </div>
    </div>
    </form>
</body>
</html>





comments powered by Disqus


Search dotnetlearners.com