本篇博客是开篇之作，虽然工作三四年了，但是并未留下只言片语，借此跳槽之际，稍作调整，写些东西，当作自己的笔记吧，
模态框是在项目中经常用到的，但是一般都是采用Bootstrap的插件，实现，具体怎么实现的并不清楚，于是就有了如下内容：
需求： 模态框持久居中：无论页面内容多少，模态框不随页面的滚动而滚动。
效果图：
当点击shouw 和hide 的时候可以切换模态框的状态，
实现样式码：
body { background-color: gray; margin: 0 auto; z-index: 0; height:100vh; } #Content { text-align: center; margin:auto 10%; } #toast { position:fixed; top: 40vh; left:20px; right: 20px; background-color: yellow; min-height: 20vh; z-index:10; border-radius: 10px; display: none; } #toast>.title { height: 80px; background-color: #fff; border-radius: 10px; }
实现js代码：
function toastshow()
{
$("#toast").css("display","table-cell")
}
function toasthide()
{
$("#toast").hide();
}
H5 页面代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>模态框</title>
<link href="./css/site.css" type="text/css" rel="stylesheet">
<script src="./Script/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="Script/toast.js" type="text/javascript"></script>
</head>
<body>
<div id="Content">
</div>
<div id="toast">
<div class="title"></div>
</div>
<button type="button" id="show">show</button>
<button type="button" id="hide">hide</button>
<script type="text/javascript">
$("#show").click(function(){
toastshow();
});
$("#hide").click(function(){
toasthide();
});
</script>
</body>
</html>
其中的：固定居中是借助与#toast 中的top:40vh;position:fixed; 来实现其持久居中，
注：实现了一个简易的模态框，没有普遍适用性，需要封装成插件才有通用性，同时还需要实现模态框出现后，模态框范围之外的区域是不可以操作，或操作无效的，