分享若干種模態窗口的實現方法
最近開發中模態窗口用的還是挺頻繁的，分享幾種實現方式：
- 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%"})
}