element文本域选择框_模态框(蒙层和固定title,确定和取消）

需求：有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();
    }
},