提示框案例

磨镜台

于 2019-04-27 20:57:26 发布

阅读量116

点赞数

本文链接：https://blog.csdn.net/weixin_42506905/article/details/89607326

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

提示框案例

<script>
    window.onload = function () {
        var vm = new Vue({
            el:".box",
            data:{
                isShow: false
            }
        });
    }
</script>
<body>
    <!-- 03:背景div -->
    <div @click='isShow=false' class="box">
        <!-- 02:点击的按钮 04:阻止-->
        <input @click.stop='isShow=true' type="button" value="弹出弹框" id="btn01">
        <!-- 01:弹出框 -->
        <div v-show='isShow' class="pop_main" id="pop">
            <!-- 白色背景 -->
            <!-- 05:阻止父元素监听click事件 -->
            <div @click.stop='' class="pop_con">
                <div class="pop_title">
                    <h3>系统提示</h3>
                    <!-- 06:关闭按钮 -->
                    <a @click='isShow=false' href="#" id="shutoff" >×</a>
                </div>
                <div class="pop_detail">
                    <p class="pop_text">亲！请关注近期的优惠活动！</p>
                </div>
                <div class="pop_footer">
                </div>
            </div>
            <div class="mask"></div>
        </div>
    </div>
</body>

磨镜台

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
提示框案例

提示框案例<script> window.onload = function () { var vm = new Vue({ el:".box", data:{ isShow: false } }); }</script&gt...
复制链接

扫一扫

专栏目录