[jQuery UI] 網頁跳出視窗功能 modal

Posted on Edited on In Views: Disqus:

 

一個網頁點選跳出視窗案例sellerator

我以自己的方式來做此功能，就是使用jQuery UI的Dialog來做，

先小試一個基礎範例

jQuery UI Dialog - Default functionality

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Dialog - Default functionality</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <link rel="stylesheet" href="//jqueryui.com/resources/demos/style.css">

    <script>

        $(
            function () {
                $("button").click(function () {
                    $("#dialog").dialog();
                })
            }
        )

        //相等於
        //$(document).ready(function () {
        //    $("button").click(function () {
        //        $("#dialog").dialog();
        //    })
        //})

    </script>

</head>
<body>

    <button>click</button>

    <div id="dialog" title="Basic dialog" style="display:none">
        <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
    </div>

</body>
</html>

 

進階範例

jQuery UI Dialog - Default functionality

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Dialog - Default functionality</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <link rel="stylesheet" href="//jqueryui.com/resources/demos/style.css">

    <script>
        //How to resize jquery ui dialog with browser
        //http://stackoverflow.com/questions/9879571/how-to-resize-jquery-ui-dialog-with-browser
        $(
            function () {
                $("button").click(function () {
                    $("#dialog-confirm").dialog({

                        resizable: true,
                        height: $(window).height() * 0.9,//dialog視窗��度
                        width: $(window).width() * 0.9,
                        modal: true,
                        buttons: {
                            //自訂button名稱
                            "Delete all items": function () {
                                $(this).dialog("close");
                            },
                            Cancel: function () {
                                $(this).dialog("close");
                            }
                        }
                    });
                })

                $(window).resize(function () {
                    var wWidth = $(window).width();
                    var dWidth = wWidth * 0.9;
                    var wHeight = $(window).height();
                    var dHeight = wHeight * 0.9;
                    $("#dialog-confirm").dialog("option", "width", dWidth);
                    $("#dialog-confirm").dialog("option", "height", dHeight);
                });
            }
        )
    </script>

</head>
<body>

    <button>click</button>
    <div id="dialog-confirm" title="Empty the recycle bin?" style="display:none">
        <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
    </div>

    <p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>

</body>
</html>

 

參考資料：

jQuery UI Dialog