實(shí)現(xiàn)彈框遮罩, 點(diǎn)擊其他區(qū)域彈框關(guān)閉

Imfan 發(fā)布于2019-08-23 16:52 / 3547人閱讀

摘要：就是實(shí)現(xiàn)一個(gè)彈窗，在點(diǎn)擊內(nèi)容的時(shí)候不關(guān)閉，在點(diǎn)擊其他區(qū)域的時(shí)候關(guān)閉彈窗可以根據(jù)事件冒泡來解決這個(gè)問題我是外層容器我是內(nèi)容停止冒泡另一種方法的方法用來查看元素的包含關(guān)系我是外層容器我是內(nèi)容如果點(diǎn)擊到了為以外的區(qū)域

就是實(shí)現(xiàn)一個(gè)彈窗，在點(diǎn)擊內(nèi)容的時(shí)候不關(guān)閉，在點(diǎn)擊其他區(qū)域的時(shí)候關(guān)閉彈窗

可以根據(jù)事件冒泡來解決這個(gè)問題

//html



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

另一種方法

js的contains方法用來查看dom元素的包含關(guān)系

//html 


//js
export default {
        data(){
            return {
                show: true
            }
        },
        methods: {
            cancel(event) {
                let content= document.getElementsByClassName("content")[0];
                if (content) {
                    if (!content.contains(event.target)) {
                    //如果點(diǎn)擊到了class為content以外的區(qū)域
                        this.show= false;
                    }
                }
            }
        }
    }

GPU云服務(wù)器云服務(wù)器彈框遮罩 java實(shí)現(xiàn)點(diǎn)擊彈框 js 彈框關(guān)閉 html實(shí)現(xiàn)彈框界面

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/103425.html

相關(guān)文章

用原生js寫出一個(gè)彈框+遮罩層的頁面,完成彈框垂直居中頁面且點(diǎn)擊彈框外任何區(qū)域去掉彈框和遮罩層的功能

摘要：背景官網(wǎng)有個(gè)對(duì)話框組件如圖如果哪天不能用框架了不能用組件了只能用原生寫頁面現(xiàn)在的我可能要一個(gè)頁面寫一年目標(biāo)用原生完成這個(gè)頁面彈框處于垂直居中狀態(tài)且點(diǎn)擊彈框外任意區(qū)域關(guān)閉彈框?qū)懥撕芫煤芫脮r(shí)間就不說了遇到的最難的問題就是不知道怎么關(guān)閉彈框后面還背景:Ant官網(wǎng)有個(gè)對(duì)話框Model組件.如圖: showImg(https://segmentfault.com/img/bVbwMCG?w=1...

betacat 2019-08-30 15:44 評(píng)論0 收藏0
用原生js寫出一個(gè)彈框+遮罩層的頁面,完成彈框垂直居中頁面且點(diǎn)擊彈框外任何區(qū)域去掉彈框和遮罩層的功能

摘要：背景官網(wǎng)有個(gè)對(duì)話框組件如圖如果哪天不能用框架了不能用組件了只能用原生寫頁面現(xiàn)在的我可能要一個(gè)頁面寫一年目標(biāo)用原生完成這個(gè)頁面彈框處于垂直居中狀態(tài)且點(diǎn)擊彈框外任意區(qū)域關(guān)閉彈框?qū)懥撕芫煤芫脮r(shí)間就不說了遇到的最難的問題就是不知道怎么關(guān)閉彈框后面還背景:Ant官網(wǎng)有個(gè)對(duì)話框Model組件.如圖: showImg(https://segmentfault.com/img/bVbwMCG?w=1...

CoderDock 2019-08-26 10:59 評(píng)論0 收藏0
從ES6重新認(rèn)識(shí)JavaScript設(shè)計(jì)模式(一): 單例模式

摘要：什么是單例模式單例模式是一種十分常用但卻相對(duì)而言比較簡單的單例模式。對(duì)象就是單例模式的體現(xiàn)?？偨Y(jié)單例模式雖然簡單，但是在項(xiàng)目中的應(yīng)用場景卻是相當(dāng)多的，單例模式的核心是確保只有一個(gè)實(shí)例，并提供全局訪問。 1. 什么是單例模式? 單例模式是一種十分常用但卻相對(duì)而言比較簡單的單例模式。它是指在一個(gè)類只能有一個(gè)實(shí)例，即使多次實(shí)例化該類，也只返回第一次實(shí)例化后的實(shí)例對(duì)象。單例模式不僅能減少不必要...

G9YH 2019-08-22 15:35 評(píng)論0 收藏0
簡單實(shí)現(xiàn)彈出彈框頁面背景半透明灰，彈框內(nèi)容可滾動(dòng)原頁面內(nèi)容不可滾動(dòng)的效果(JQuery)

摘要：當(dāng)彈框彈出時(shí)原頁面內(nèi)容不能滾動(dòng)，即將樣式設(shè)為原頁面的內(nèi)容就不會(huì)動(dòng)了當(dāng)彈框關(guān)閉后再將樣式改為默認(rèn)的中的寫一個(gè)函數(shù)，再在彈框的中調(diào)用函數(shù)。彈出彈框效果展示實(shí)現(xiàn)原理 html結(jié)構(gòu)比較簡單，即：遮罩層彈框先寫覆蓋顯示窗口的遮罩層div.box，因?yàn)橐谡麄€(gè)窗口顯示固定，所以position要設(shè)為fixed，background設(shè)為灰色半透明，由于要遮住整個(gè)顯示屏，...

番茄西紅柿 2019-04-23 11:51 評(píng)論0 收藏0