您现在的位置是：网站首页>>前端技术>>weui

在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>

现象如下(点击按钮后现象)：