weui 实现弹窗框
发布时间:2019-04-30 18:00:29作者:wangjian浏览量:3778点赞量:1
在weui中实现弹窗效果如下:
<a href="javascript:;" class="weui-btn weui-btn_primary click-dialog">点击出现弹窗</a>
<div id="dialog-alert" style="display: none;">
<div class="weui-mask"></div>
<div class="weui-dialog">
<div class="weui-dialog__hd"><strong class="weui-dialog__title">弹窗</strong></div>
<div class="weui-cell">
<label class="weui-label" style="width: 20%;padding-right: 10px;">数量</label>
<div class="weui-cell__bd gw_num" >
<input class="weui-input" type="number" placeholder="请输入数量"/>
</div>
</div>
<div class="weui-cell">
<label class="weui-label" style="width: 20%;padding-right: 10px;">密码</label>
<div class="weui-cell__bd">
<input class="weui-input" type="password" placeholder="请输入密码"/>
</div>
</div>
<div class="weui-dialog__ft">
<a href="javascript:;" id="cacel-dialog" style="cursor: pointer" class="weui-dialog__btn weui-dialog__btn_default">取消</a>
<a href="javascript:;" id="pass-dialog" style="cursor: pointer" class="weui-dialog__btn weui-dialog__btn_primary">确定</a>
</div>
</div>
</div>
<script>
//点击出现弹窗事件
$(document).on('click', '.click-dialog', function() {
$('#dialog-alert').show();
});
//取消事件
$(document).on('click', '#cacel-dialog', function() {
$('#dialog-alert').hide();
});
//确认事件
$(document).on('click', '#pass-dialog', function() {
})
</script>
现象如下(点击按钮后现象):
下一篇:weui —— 提示信息