html app从上向下弹框,自定义弹出框.html

#test{

position:relative;

}

#div{

width: 0px;

height: 0px;

background: red;

position: fixed;

top: 20%;

left: 50%;

}

/*移除底部或顶部三角,需要在删除此代码*/

.mui-popover .mui-popover-arrow:after {

width: 0px;

}

.mui-popover #popup{

height: 60px;

background-color:#CD9C4F ;

border-radius: 10px 10px ;

}

#popup .dis{

position: absolute;

top: 22px;

left: 55px;

color: #fff;

font-size: 23px;

}

#abc{

height: 334px;

background-image: url(img/hj7.png);

background-size: contain;

padding: 73px 49px;

font-size: 18px;

color: rgb(0,0,0,0.5);

font-family:'黑体';

overflow: hidden;

}

.fa-map-o{

position: absolute;

top: 23px;

left: 22px;

font-size: 20px;

color: #fff;

}

点击此打开中间的弹出层

mui.init()

document.getElementById("test").addEventListener("tap", function() {

//调用隐藏/显示弹出层

mui("#popover").popover('toggle', document.getElementById("div"));

})

一键复制

编辑

Web IDE

原始数据

按行查看

历史