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

weui 实现弹窗框

发布时间:2019-04-30 18:00:29作者:wangjian浏览量:1722点赞量:0

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

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

    image.png

0 +1