文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

weaken-background-by-blur

发布于 2023-08-19 19:14:40 字数 1733 浏览 0 评论 0 收藏 0

deemphasizing-blur

<style>
    main {
        transition: .6s;
        background: white;
    }

    main.de-emphasized {
        -webkit-filter: blur(3px);
        filter: blur(3px);
    }

    dialog {
        position: fixed;
        top: 50%;
        left: 50%;
        z-index: 1;
        width: 10em;
        padding: 2em;
        margin: -5em;
        border: 1px solid silver;
        border-radius: .5em;
        box-shadow: 0 .2em .5em rgba(0, 0, 0, .5),
        0 0 0 100vmax rgba(0, 0, 0, .2);
    }

    dialog:not([open]) {
        display: none;
    }

    body {
        font: 150%/1.6 Baskerville, Palatino, serif;
    }
</style>

<body>
<dialog>O HAI, I'm a dialog. Click on me to dismiss.</dialog>
<main class="">
    <button>Show dialog</button>
    <p>Bacon ipsum dolor sit amet consectetur...</p>
</main>
<script>
    function $(sel) {
        return document.querySelector(sel);
    }
    var button = $('button');
    var dialog = $('dialog');
    var main = $('main');
    button.onclick = function () {
        dialog.setAttribute('open', '');
        /* set open attribute can make dialog open.*/
        main.classList.add('de-emphasized');
    };
    dialog.onclick = function () {
        if (dialog.close) {
            dialog.close();
        } else {
            dialog.removeAttribute('open');
        }
        main.classList.remove('de-emphasized');
    }
</script>
</body>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据

weaken-background-by-blur

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。