最近在實現一些jQuery相關的組件，既是為了熟悉一下 jQuery 的語法，也是為了能夠了解一些 jQuery 插件底層的基本實現。

今天花了一些時間做的一個模態盒（這是谷歌翻譯的名字，吾輩感覺挺不錯的，所以也便使用了這個名稱），雖然只是一個很小的東西，然而做完之後感覺也挺不錯的，所以吾輩也便分享一下自己的代碼吧！

效果圖：

html:

<!--region 模態盒（模式對話框）-->

<button class="modal-btn">打開模態</button>
<div class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <p>模態盒</p>
            <span class="close">×</span>
        </div>
        <div class="modal-body">
            <h3>Hello World!</h3>
            <p>Modals are awesome!</p>
            <p>Go Back To <a href="http://w3schools.com">W3</a> How TO Examples</p>
        </div>
        <div class="modal-footer">
            頁腳
        </div>
    </div>
</div>
<br/><br/>

<!--endregion-->
 

css:

/*region 模態盒（模式對話框）*/

/*設置一下按鈕*/
.modal-btn {
    margin-left: 45%;
    padding: 5px 10px;
    border: none;
    " data-mce-style="color: #a5c261;">darkcyan;
    color: white;
    transition: 0.5s;
}

/*鼠標懸浮時按鈕的特效*/
.modal-btn:hover {
    cursor: pointer;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/*設置模態盒*/
.modal {
    position: fixed;
    /*設置 top 為 0 是為了從最上面開始計算高度（寬度同理）*/
    top: 0;
    left: 0;
    z-index: 1;
    /* 寬高最大化（防止點擊其他的東西） */
    width: 100%;
    height: 100%;
    " data-mce-style="color: #e8bf6a;">rgba(0, 0, 0, 0.4);
    display: none;
}

/*設置內層的盒子*/
.modal-content {
    position: relative;
    max-width: 1000px;
    /*設置盒子的陰影（立體感）*/
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    /*設置模態盒的位置*/
    margin: auto;
}

/*模態盒的頭部*/
.modal-header, .modal-footer {
    " data-mce-style="color: #a5c261;">darkcyan;
    color: white;
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
}

/*頭部私有屬性*/
.modal-header {
    display: flex;
    justify-content: space-between;
    font-size: 26px;
}

/*模態盒的主體部分*/
.modal-body {
    /*height: 100px;*/
    line-height: 30px;
    " data-mce-style="color: #a5c261;">white;
    padding: 0 10px;
}

/*設置關閉按鈕*/
.close {
    cursor: pointer;
    transition: 0.5s;
}

.close:hover {
    color: black;
}

/*endregion*/
 

js:

//region 模態盒

$(document).ready(function () {
    //打開模態盒
    $(".modal-btn").click(function () {
        var modal = $(".modal");
        var modalContent = $(".modal-content");
        $(modal).show();
        //jQuery 動畫
        $(modalContent).css({
            top: "-200px",
            opacity: "0"
        });
        $(modal).css({
            opacity: "0"
        });
        $(modalContent).animate({
            top: "100px",
            opacity: "1"
        }, 500);
        $(modal).animate({
            opacity: "1"
        }, 500);
    });
    //關閉
    $(".close").click(function () {
        $(".modal").hide();
    });
});

//endregion
 

sdfs

當然啦，因為使用了 jQuery，所以也必須要有 jQuery 的類庫才行呢，不過在這兒的一般都知道怎麽用的吧。。。吾輩目前使用的是 3.2.1最新的版本

最後，吾輩寫的代碼自然是全部同步到了 GitHub 上面啦（https://github.com/RXLiuli/RXLiuli.github.io），歡迎前輩們指點調教

html+css+jquery 實現模態盒（模式窗口對話框）