简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 怎样使模态对话框以外的页面背景变模糊?
伊谢尔伦
伊谢尔伦 2017-04-11 12:06:18
0
4
469

目前的模态对话框是这样实现的:
点击按钮, 在document.body下添加半透明黑色背景和模态对话框

除了这个模态对话框之外页面里还有些其他内容, 比如上图中的那两个article

现在的需求是: 在模态对话框弹出时, 使页面中的其他内容应用-webkit-filter:blur()的CSS属性, 而模态对话框本身不受该样式的影响

问题的关键在于希望开发一个通用的模态对话框函数, 使其在任何页面上都能模糊页面上的其它元素(除了模态对话框本身).

除了写JS, 有没有什么简单的办法来达到这个(选择器的)效果呢?

已经解决 感谢回答者提供的关于CSS选择器的思路

    //apply animation
    setTimeout(function(){
        //选择document.body下所有非.shade class的第一级元素
        var others = document.querySelectorAll('body > *:not(.shade)'); 
        //遍历nodeList, 如果该元素不是script, 则给该元素添加滤镜
        [].forEach.call(others, function(elem){
            if(elem.nodeName != 'SCRIPT'){
                elem.style.webkitFilter = 'blur(6px)'; 
            }
        })
        //模态对话框本身的动画效果
        prompt.style.opacity = 1; 
        prompt.style.padding = 0; 
    }, 50);

模态对话框的移除也类似, 只不过这次模态对话框已经被移除, 所以直接选择document.body下的第一级元素就好

    function modualRemoval(){
        document.body.removeChild(shade); 
        var others = document.querySelectorAll('body > *'); 
        [].forEach.call(others, function(elem){
            if(elem.nodeName != 'SCRIPT'){
                //去除模糊效果
                elem.style.webkitFilter = ''; 
            }
        }); 
    }
伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

Antworte allen(4)
巴扎黑
巴扎黑2017-04-11 12:08:18 4 Etage

不要直接给 body 元素设置 -webkit-filter: blur
例如你的弹窗 class 为 .layer-modal 那么你可以这么写 css

Style:

body.blur > *:not(.layer-modal){
    -webkit-filter: blur(6px);
    overflow: hidden;
}

HTML:

<body class="blur">...</body>
Wie +0
Antwort hinzufügen
小葫芦
小葫芦2017-04-11 12:08:18 3 Etage

把对话框的z-index值设置大点不就行了。

Wie +0
Antwort hinzufügen
迷茫
迷茫2017-04-11 12:08:18 2 Etage

擅用伪元素，通过::before制造一个半透明层

Wie +0
Antwort hinzufügen
刘奇
刘奇2017-04-11 12:08:18 1 Etage

利用 positon: fixed; 和 z-index，下面的例子随手写的，最上层先后放置，就没管 z-index，其次还要注意滚动条等，可以去看下 bootstrap 的 modal 和 modal-dropback 的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        .cover {position: fixed; width: 100%; height: 100%; background: #ccc; filter: alpha(opacity=50); opacity: .5;}
        .modal {position: fixed; width: 100%; height: 100%;}
        .modal-content {width: 100px; height: 100px; background: #fff; margin: 100px auto; margin-bottom: 0; border: 1px solid red;}
    </style>
</head>
<body>
    <p class="cover">
    </p>
    <p class="modal">
        <p class="modal-content">
            lsdjflsdfsldfsdf<br/>
            lsjflsdfjlsfd
        </p>
    </p>
    lsjflsjdfljsdfljsldfjsldfjs
    lsdfjlsjdflsjdf<br/>
    lsfjlsdfjlsjdflsdfj
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    lsjflsfjlsjdflsjdfljsl
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    lsjlfjslfjsldf
</body>
</html>

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！