这两天接到一个需求是制作一个模态框，
20180306154549.png
20180306154608.png
需求的流程是第一次点击上面的按钮，出现遮罩层和icon的图标，第二次点击的时候，icon图标消失，出现海报图，然后点击空白处，模态框消失。
上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="css/mui.css" rel="stylesheet" />
<link href="css/base.css" rel="stylesheet" />
<script src="js/mui.min.js"></script>
<script src="js/mui.previewimage.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script src="http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.js"></script>
<script src="fontmain/iconfont.js"></script>
<script type="text/javascript">
if(window.plus) {
plusReady();
} else {
document.addEventListener("plusready", plusReady, false);
}
// 扩展API准备完成后要执行的操作
function plusReady() {
var ws = plus.webview.currentWebview(); //pw回车可输出plus.webview
// ... code
}
</script>
<title></title>
<style>
/*icon图标引入样式*/
.icon {
width: 30px;
height: 30px;
vertical-align: -0.15em;
fill: currentcolor;
overflow: hidden;
}
#icon-anniubutton4 {
color: blue;
background: blue;
}
.mui-table-view-cell {
float: left;
}
/*模态框*/
#typeid li {
line-height: 3em;
/*background-image: url("icons/selectright.png");*/
background-repeat: no-repeat;
background-position: right;
background-size: 1em;
position: absolute;
top: 12px;
right:10px;
}
#typeid li span:nth-child(2) {
float: right;
margin-right: 1em;
color: rgb(199, 55, 69);
}
#tupelisttitle {
background-color: white;
line-height: 3em;
text-align: center;
}
#typelist {
overflow: hidden;
text-align: center;
}
#typelist li {
line-height: 30px;
margin-left: -10px;
float: left;
width: 80px;
text-align: center;
}
#typelist li a {
display: block;
}
.icon-wrap {
display: inline-block;
width:26px;
height: 36px;
margin: 4px 0px;
overflow: hidden;
}
#type {
position: fixed;
width: 320px;
background: rgb(230,230,230);
z-index: 150;
bottom: -100%;
transition: bottom 0.5s;
-moz-transition: bottom 0.5s;
-webkit-transition: bottom 0.5s;
-o-transition: bottom 0.5s;
}
/*h5海报的模态框*/
.poster {
width: 90%;
height: auto;
max-height: 1000px;
overflow: hidden;
position: relative;
margin: 0 auto;
display: none;
}
.poster img {
width: 90%;
height: auto;
max-height: 1000px;
overflow: hidden;
z-index: 200;
}
/*覆盖一层灰色来实现弹出层效果*/
#mbDIV {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height:1000px;
max-height: 1000px;
background-color: #000;
z-index: 10;
filter: alpha(opacity=50);
/**写滤镜为了兼容ie，不过微信开发的话其实可以不要，微信的浏览器支持opacity **/
opacity: 0.5;
/**设置50%透明 **/
}
li {
list-style: none;
}
</style>
</head>
<body>
<nav class="head" style="background: #FF9F00;">
<div class="title-wrapper">
<span>有享电商</span>
<div>
</div>
</div>
<!--模态框-->
<form id="form1">
<div style="width: 60px;height:60px;float: right;position:relative;">
<ul id="typeid" style="margin-top:69px; ">
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-anniubutton4"></use>
</svg>
</li>
</ul>
</div>
<div id="mbDIV" style="display: none;" onclick="hiddenmbdiv()">
<%--设置弹出层的底部颜色，让底部文字不可见--%>
</div>
<div id="type">
<!-- <div id="tupelisttitle">
<span>产地</span>
<span style="max-width: 1em; position: absolute; right: 1em;" onclick="hiddenmbdiv();">X</span>
</div> -->
<ul id="typelist" >
<li id="quality">
<a href="javascript:;">
<div class="icon-wrap">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-zhiliang"></use>
</svg>
</div>
<div class="nav-text">
<span>质量</span>
</div>
</a>
</li>
<li>
<a href="javascript:;">
<div class="icon-wrap">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-zhiliang-xianxing"></use>
</svg>
</div>
<div class="nav-text">
<span>质量线性</span>
</div>
</a>
</li>
<li>
<a href="">
<div class="icon-wrap">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-peizaizhuangche-xianxing"></use>
</svg>
</div>
<div class="nav-text">
<span>配载线性</span>
</div>
</a>
</li>
<li>
<a href="">
<div class="icon-wrap">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-peizaizhuangche"></use>
</svg>
</div>
<div class="nav-text">
<span>配载</span>
</div>
</a>
</li>
<li>
<a href="">
<div class="icon-wrap">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shangpin-xianxing"></use>
</svg>
</div>
<div class="nav-text">
<span>商品线性</span>
</div>
</a>
</li>
<li>
<a href="">
<div class="icon-wrap">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shangpin"></use>
</svg>
</div>
<div class="nav-text">
<span>商品</span>
</div>
</a>
</li>
<li>
<a href="">
<div class="icon-wrap">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-caigou"></use>
</svg>
</div>
<div class="nav-text">
<span>采购</span>
</div>
</a>
</li>
<li>
<a href="">
<div class="icon-wrap">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-caigou-xianxing"></use>
</svg>
</div>
<div class="nav-text">
<span>采购线性</span>
</div>
</a>
</li>
<li>
<a href="">
<div class="icon-wrap">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-zitigui-xianxing"></use>
</svg>
</div>
<div class="nav-text">
<span>自提柜线性</span>
</div>
</a>
</li>
<li>
<a href="">
<div class="icon-wrap">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-zitigui"></use>
</svg>
</div>
<div class="nav-text">
<span>自提柜</span>
</div>
</a>
</li>
<li>
<a href="">
<div class="icon-wrap">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-chaibaoguoqujian-xianxing"></use>
</svg>
</div>
<div class="nav-text">
<span>拆包裹取件线性</span>
</div>
</a>
</li>
<li>
<a href="">
<div class="icon-wrap">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-chaibaoguoqujian"></use>
</svg>
</div>
<div class="nav-text">
<span>拆包裹取件</span>
</div>
</a>
</li>
<li>
<a href="">
<div class="icon-wrap">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-baoguofahuo-xianxing"></use>
</svg>
</div>
<div class="nav-text">
<span>包裹发货线性</span>
</div>
</a>
</li>
<li>
<a href="">
<div class="icon-wrap">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-yunshuzhongwuliu"></use>
</svg>
</div>
<div class="nav-text">
<span>运输中物流线性</span>
</div>
</a>
</li>
<li>
<a href="">
<div class="icon-wrap">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-yunshuzhongwuliu-xianxing"></use>
</svg>
</div>
<div class="nav-text">
<span>运输中物流线性</span>
</div>
</a>
</li>
<li>
<a href="">
<div class="icon-wrap">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-zhiliang"></use>
</svg>
</div>
<div class="nav-text">
<span>质量</span>
</div>
</a>
</li>
</ul>
</div>
<div class="poster" id="iposter"><img src="img/timg.jpg"/></div>
</form>
</nav>
</body>
<script type="text/javascript">
var e = window.event || e;
//事件注册
function addListener(element, e, fn) {
if(element.addEventListener) {
element.addEventListener(e, fn, false);
} else {
element.attachEvent(e, fn);
}
}
//弹出选项卡
var type = $('#typeid').children();
for(var i = 0; i < type.length; i++) {
addListener(type[i], "click", function(e) {
// $("#tupelisttitle").find("span:nth-child(1)").text($(this).find("span:nth-child(1)").text());
$("#type")[0].style.bottom = "0";
$("#mbDIV").css("display", "")
});
}
//点击空白处关闭选项
function hiddenmbdiv() {
$("#type")[0].style.bottom = "-100%";
$("#iposter").css("display","none");
$('#mbDIV').css('display', 'none');
}
//绑定选定的选项
var typelists = $('#typelist').children();
for(var k = 0; k < typelists.length; k++) {
addListener(typelists[k], "click", function(e) {
var typeids = $('#typeid').children();
// for(var q = 0; q < typeids.length; q++) {
// if($(typeids[q]).find("span:nth-child(1)").text() == $("#tupelisttitle").find("span:nth-child(1)").text()) {
// $(typeids[q]).find("span:nth-child(2)").text($(e.target).text());
// }
// }
// 点击空白处关闭
hiddenmbdiv();
});
}
// h5海报的模态框
$("#quality").click(function(){
$("#iposter").css("display","block");
$("#type")[0].style.bottom = "-100%";
$("#mbDIV").css("display", "");
})
</script>
</html>
遇到的bug:
1 在制作第二个模态框时，当时a标签的href属性未加JavaScript:;导致点击的时候，都是刷新了，出现不了第二个模态框
网友评论