分享若干种模态窗口的实现方法
最近开发中模态窗口用的还是挺频繁的,分享几种实现方式:
- 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%"})
}