hbuilder制作模态框

这两天接到一个需求是制作一个模态框，

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:;导致点击的时候，都是刷新了，出现不了第二个模态框

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,547评论 6赞 477
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,399评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,428评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,599评论 1赞 274
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,612评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,577评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,941评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,603评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,852评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,605评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,693评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,375评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,955评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,936评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,172评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 43,970评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,414评论 2赞 342

hbuilder制作模态框

推荐阅读更多精彩内容