html+css+jquery 实现模态盒（模式窗口对话框）

Posted 2020-09-26

最近在实现一些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 实现模态盒（模式窗口对话框）的主要内容，如果未能解决你的问题，请参考以下文章

原生wcPop.js消息提示框(移动端)内含仿微信弹窗效果

onclick 单个产品页面中的模态框

vue给模态框弹窗添加路由，实现页面后退可以关闭模态框

前端：两种实现带背景遮罩的弹窗写法

引导模式中的 jQuery dataTable 溢出

如何防止模态盒关闭？