Sunday, 27 July 2014

Model Dialog in JQuery



Open content in an interactive overlay.
The basic dialog window is an overlay positioned within the viewport and is protected from page content (like select elements) shining through with an iframe. It has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Dialog - Default functionality</title>
   
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
   
    <script>

        function Showdlg() {
            $("#dialog").html("Confirm Dialog Box");

            // Define the Dialog and its properties.
            $("#dialog").dialog({
                resizable: false,
                modal: true,
                title: "Modal Dialog",
                height: 250,
                width: 400,
                buttons: {
                    "Yes": function () {
                        $(this).dialog('close');
                        callback(true);
                    },
                    "No": function () {
                        $(this).dialog('close');
                        callback(false);
                    }
                }
            });
        }

        function callback(value) {
            if (value) {
                alert("Confirmed");
            } else {
                alert("Rejected");
            }
        }


    </script>
</head>
<body>

    <button onclick="Showdlg();">Click to show dialog</button>
    <div id="dialog"></div>

</body>
</html>




No comments:

Post a Comment