分享若干种模态窗口的实现方法

最新推荐文章于 2024-12-21 20:28:28 发布

Tomhs3000

最新推荐文章于 2024-12-21 20:28:28 发布

阅读量583

点赞数

CC 4.0 BY-SA版权

分类专栏：常用功能文章标签： css js 模态窗口

本文链接：https://blog.youkuaiyun.com/Tomhs3000/article/details/78143506

常用功能专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种简单的模态窗口实现方法，包括HTML、CSS和JavaScript的代码示例。该方法通过添加背景遮罩层和调整弹出窗口的位置来创建模态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

分享若干种模态窗口的实现方法

最近开发中模态窗口用的还是挺频繁的，分享几种实现方式：

PC端模态窗口
代码块高亮
图片链接和图片上传
LaTex数学公式
UML序列图和流程图
离线写博客
导入导出Markdown文件
丰富的快捷键

PC端模态窗口

需要做的几个步骤
1背景层
2弹出层
3点击弹出模态窗口
4点击关闭模态窗口
5点击背景关闭模态窗口

首先是来个简单的效果图。 —— [ 在线演示 ]

代码展示
html部分

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>模态窗口</title>

    </head>
    <body>
        <button id="myBtn">点击我出现模态窗口</button>
        <div id="shareMyBlog">      
            <a href="http://blog.youkuaiyun.com/tomhs3000" >这是我的博客</a>
            <btn id="closeWindow">点我关闭</btn>
    </div>
    </body>
</html>

css部分

*{
    margin：0;
    padding: 0;

}
body{
    background:#fff;
}
/*背景遮罩层样式*/
#bg{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1001;
    background-color:#000;
    -moz-opacity: 0.5;
    opacity: .50;
    filter: alpha(opacity = 50);
}
/*弹出窗口样式*/
#shareMyBlog{
    display: none;
    background: lightcyan;
    width: 300px;
    height: 200px;
    line-height: 300px;
    text-align: center; 
    position: fixed;
    top:50%;
    left:50%;
    -ms-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
/*关闭按钮样式*/
#closeWindow{
    background: lightgreen;
    color: #fff;
    font-size: 14px;
    padding: 3px;
}

js部分

//绑定点击事件
$("#myBtn").on("click",function(){
    popupDiv("shareMyBlog");
})
$("#closeWindow").on("click",function(){
    hideDiv("shareMyBlog");
})
//弹出模态窗口函数
function popupDiv(div_id) {
            var $div_obj = $("#" + div_id);
            // 添加并显示遮罩层
            $("<div id='bg' class='bg_wrap'></div>")
                .click(function() {
                        // 添加点击事件，点击背景层隐藏模态窗口
                  hideDiv(div_id);
                }).appendTo("body").fadeIn(200);
            // 显示弹出的DIV
            $div_obj.css({
                "display": "block",
                "z-index":"1010"
            }).animate({
              opacity : "show"
            }, "slow");
            $('html,body').css({"overflow":"hidden","height":"100%"})
        }
/*隐藏弹出DIV*/
function hideDiv(div_id) {
    $("#bg").remove();
    $("#" + div_id).animate({
        opacity : "hide"
    }, "slow");
    $('html,body').css({"overflow":"visible","height":"100%"})
}