需求:有title的弹框和蒙层,这里用的JQ weui,做的h5页面
1、html:同级关系
蒙层:
<div class="grey-shaow" style="display: none"></div>
固定的title:
<!--弹框标题-->
<div class=" select-title" style="display:none;position: absolute;top: 20%;left: 5%;font-size: 1rem;width: 90%;height: 12%;z-index: 23;" >
<div style="background-color: #e4e4e4;padding: 4%;display: flex;flex-direction: row;justify-content: space-between;">
<span class=" cancel">取消</span>
<span class="title-center" >请选择内容</span>
<span class=" yes" >确定</span>
</div>
<div class="weui-cell auto-select-text-wrap" style="background-color: #fff;padding-bottom:5px;">
<div class="weui-cell__bd ">
<input class="weui-input auto-select-text" type="input" placeholder="选择或者输入查找" style="margin-top:10px">
</div>
</div>
</div>
1.1比如要做出下拉框模式,加一个
<!--下拉弹框-->
<div class="person-select-box" style="display: none;position: absolute;top: 0;left: 0;right: 0;bottom: 0; font-size: 1rem;width: 90%; height: 50%;margin: auto;z-index: 22;overflow: auto;" >
<div class="person-list" style="overflow: hidden;">
<div class="list" style="padding-top: 70px;background-color: #fff;"> </div>
</div>
</div>
1.2 比如要做出文本域模式,加一个
<!--文本域-->
<div class="weui-cells weui-cells_form textarea" style="display: none;position: absolute;top: 0;left: 0;right: 0;bottom: 0; font-size: 1rem;width: 90%; height: 50%;margin: auto;z-index: 22;overflow: auto;">
<div class="weui-cell">
<div class="weui-cell__bd">
<textarea class="weui-textarea" placeholder="" rows="5" style="padding-top: 10px;"></textarea>
<!--<div class="weui-textarea-counter"><span>0</span>/200</div>-->
</div>
</div>
</div>
2、js:
如果是jq,直接显示show(),隐藏hide()某个元素就行了,点击确定和取消以及蒙层的时候,取消整体也是一样的,附上我的代码
{
event:'click',
selector:'.cancel,.grey-shaow',
callback:function (e) {
this.el.find('.list').empty();
this.el.find('.person-select-box,.grey-shaow,.select-title,.textarea').hide();
}
},