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

来源：互联网发布：java管理系统有哪些编辑：程序博客网时间：2024/05/18 00:11

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

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

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.csdn.net/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%"})}

阅读全文

0 0