模态框的实现

本篇博客是开篇之作，虽然工作三四年了，但是并未留下只言片语，借此跳槽之际，稍作调整，写些东西，当作自己的笔记吧，

模态框是在项目中经常用到的，但是一般都是采用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; 来实现其持久居中，

注：实现了一个简易的模态框，没有普遍适用性，需要封装成插件才有通用性，同时还需要实现模态框出现后，模态框范围之外的区域是不可以操作，或操作无效的，

 

posted @ 2018-03-30 20:37  若水如引  阅读(549)  评论(0)    收藏  举报