模态框的实现


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

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

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

优质内容筛选与推荐>>
1、Python 中的虚拟环境
2、浅谈 iOS 版本号【转载】
3、【深度学习】计算机视觉中的 Single-Scale 和 Multi-Scale
4、IP协议
5、Quick Launcher FAQ


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号





    联系我们

    欢迎来到TinyMind。

    关于TinyMind的内容或商务合作、网站建议,举报不良信息等均可联系我们。

    TinyMind客服邮箱:support@tinymind.net.cn