实现弹框遮罩, 点击其他区域弹框关闭

Imfan 发布于2019-08-23 16:52 / 3527人阅读

摘要：就是实现一个弹窗，在点击内容的时候不关闭，在点击其他区域的时候关闭弹窗可以根据事件冒泡来解决这个问题我是外层容器我是内容停止冒泡另一种方法的方法用来查看元素的包含关系我是外层容器我是内容如果点击到了为以外的区域

就是实现一个弹窗，在点击内容的时候不关闭，在点击其他区域的时候关闭弹窗

可以根据事件冒泡来解决这个问题

//html



//js
export default {
        data(){
            return {
                show: true
            }
        },
        methods: {
            cancel(){
                this.show = false
            }
        }
    }

另一种方法

js的contains方法用来查看dom元素的包含关系

//html 


//js
export default {
        data(){
            return {
                show: true
            }
        },
        methods: {
            cancel(event) {
                let content= document.getElementsByClassName("content")[0];
                if (content) {
                    if (!content.contains(event.target)) {
                    //如果点击到了class为content以外的区域
                        this.show= false;
                    }
                }
            }
        }
    }

GPU云服务器云服务器弹框遮罩 java实现点击弹框 js 弹框关闭 html实现弹框界面

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103425.html

用原生js写出一个弹框+遮罩层的页面,完成弹框垂直居中页面且点击弹框外任何区域去掉弹框和遮罩层的功能

摘要：背景官网有个对话框组件如图如果哪天不能用框架了不能用组件了只能用原生写页面现在的我可能要一个页面写一年目标用原生完成这个页面弹框处于垂直居中状态且点击弹框外任意区域关闭弹框写了很久很久时间就不说了遇到的最难的问题就是不知道怎么关闭弹框后面还背景:Ant官网有个对话框Model组件.如图: showImg(https://segmentfault.com/img/bVbwMCG?w=1...

betacat 2019-08-30 15:44 评论0 收藏0
用原生js写出一个弹框+遮罩层的页面,完成弹框垂直居中页面且点击弹框外任何区域去掉弹框和遮罩层的功能

摘要：背景官网有个对话框组件如图如果哪天不能用框架了不能用组件了只能用原生写页面现在的我可能要一个页面写一年目标用原生完成这个页面弹框处于垂直居中状态且点击弹框外任意区域关闭弹框写了很久很久时间就不说了遇到的最难的问题就是不知道怎么关闭弹框后面还背景:Ant官网有个对话框Model组件.如图: showImg(https://segmentfault.com/img/bVbwMCG?w=1...

CoderDock 2019-08-26 10:59 评论0 收藏0
从ES6重新认识JavaScript设计模式(一): 单例模式

摘要：什么是单例模式单例模式是一种十分常用但却相对而言比较简单的单例模式。对象就是单例模式的体现。总结单例模式虽然简单，但是在项目中的应用场景却是相当多的，单例模式的核心是确保只有一个实例，并提供全局访问。 1. 什么是单例模式? 单例模式是一种十分常用但却相对而言比较简单的单例模式。它是指在一个类只能有一个实例，即使多次实例化该类，也只返回第一次实例化后的实例对象。单例模式不仅能减少不必要...

G9YH 2019-08-22 15:35 评论0 收藏0
简单实现弹出弹框页面背景半透明灰，弹框内容可滚动原页面内容不可滚动的效果(JQuery)

摘要：当弹框弹出时原页面内容不能滚动，即将样式设为原页面的内容就不会动了当弹框关闭后再将样式改为默认的中的写一个函数，再在弹框的中调用函数。弹出弹框效果展示实现原理 html结构比较简单，即：遮罩层弹框先写覆盖显示窗口的遮罩层div.box，因为要在整个窗口显示固定，所以position要设为fixed，background设为灰色半透明，由于要遮住整个显示屏，...

番茄西红柿 2019-04-23 11:51 评论0 收藏0