寫了一個簡單好用的彈出層外掛

欣靜賞悅發表於2016-08-11

廢話不多說，直接上程式碼：

一、CSS

.overlayBackground {
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
    background-color: #555555;
    z-index: 1001;
    -moz-opacity: 0.7;
    opacity: .70;
    filter: alpha(opacity=70);
}
.contentDivDialog {
    display: none;
    position: absolute;
    top: 10%;
    left: 10%;
    border: 16px solid lightblue;
    background-color: white;
    z-index: 1002;
    overflow: auto;
}
View Code

二、外掛JS

(function ($) {
    $.fn.YoungDialog = function (options) {
        //Default parameters
        var defaults = {
            //Title: "",
            Width: "80%",
            Height: "80%",
            Modal: true
        };
        //Overwrite by options
        options = $.extend(defaults, options);

        //Show block div
        if (options.Modal&& $("#divBackOverlay").length == 0))
            $("body").append("<div id='divBackOverlay' class='overlayBackground'></div>");
        //Content div
        var divContent = $(this);
        var divOverlay = $("#divBackOverlay");
        divContent.show();
        divOverlay.show();
        //Style
        divContent.addClass("contentDivDialog");
        divContent.css("width", options.Width);
        divContent.css("height", options.Height);

        //Close Button
        divContent.find("#btnCloseDialog").bind("click", function (e) {
            divContent.hide();
            divOverlay.hide();
        });
    };
})(jQuery);
View Code

三、Demo

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../Scripts/jquery-1.7.1.min.js"></script>
    <link href="../Scripts/Custom/YoungDialog.css" rel="stylesheet" />
    <script src="../Scripts/Custom/YoungDialog.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnPopup").click(function () {
                $("#MyDiv").YoungDialog({
                    Width: "500px",
                    Height: "400px",
                    Modal: true
                });
            });
        });
    </script>
</head>
<body>    
    <div>
        <input id="btnPopup" type="button" value="Popup Window" />
    </div>
    <div id="MyDiv" style="display:none;" >
        <div style="text-align: right; cursor: default; height: 40px;">
            <span id="btnCloseDialog" style="font-size: 16px;"> Close </span>
        </div>
        <div>
            My Content can be everything.
        </div>
    </div>
</body>
</html>
View Code

 

相關文章