模态使背景变暗
[英]Modal darken background
问题描述
我创建了一个滑动模态，当模态滑出时，我不知道如何淡化和变暗背景。
如果单击网站http://maximizemedia.co.uk上的项目卡之一，则可以看到模态的实时预览。
当您单击页面以外的任何地方时，我也试图关闭模式，但是只能使它与关闭按钮一起使用，任何人都可以帮助我解决如何在此模式下进行以下两件事。
// Function to close all side-modals function side_modals_close() { document.querySelectorAll('.side-modal').forEach(function(modal) { modal.style.right = "-600px"; }); } // Function to show one side-modal function side_modal_open(name) { var modal = document.querySelector(name); modal.style.right = "0%"; } // Open buttons document.querySelectorAll('a.button').forEach(function(button) { button.addEventListener("click", function(elm) { side_modals_close(); side_modal_open(button.getAttribute("modal")); }); }); // Close buttons document.querySelectorAll('div.close').forEach(function(close) { close.addEventListener("click", function() { side_modals_close(); }); });
.button { text-decoration: none; color: #000; margin-right: 15px; } .side-modal { width: 35%; width: 300px padding: 40px; position: fixed; height: 100%; overflow-y: scroll; background-color: #fff; top: 0; right: -550px; bottom: 0; align-items: center; justify-content: center; -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1); display: block; transition: all 1s ease; } .modal-content { padding: 20px; } .close { position: absolute; top: 10px; right: 10px; transform: rotate(45deg); font-size: 20px }
<a href="#" class="button" modal=".modal-1">modal-1</a> <a href="#" class="button" modal=".modal-2">modal-2</a> <div class="side-modal modal-1"> <div class="modal-content"> <h2>modal-1</h2> <div class="close close-side-modal">+</div> </div> </div> <div id="modal2" class="side-modal modal-2"> <div class="modal-content"> <h2>modal-2</h2> <div class="close close-side-modal">+</div> </div> </div>
1 个解决方案
解决方案1
0 2018-08-21 13:16:29
添加一个div或遍布整个容器的任何容器。 在您的js side_modal_open和side_modals_close函数中，您可以添加/删除提供背景颜色的类。
有用的参考： HTML DOM classList Property
更新的代码段-
// Function to close all side-modals function side_modals_close() { document.querySelectorAll('.side-modal').forEach(function(modal) { modal.style.right = "-600px"; }); document.getElementById("overlay").classList.remove("darkscale"); } // Function to show one side-modal function side_modal_open(name) { var modal = document.querySelector(name); modal.style.right = "0%"; document.getElementById("overlay").classList.add("darkscale"); } // Open buttons document.querySelectorAll('a.button').forEach(function(button) { button.addEventListener("click", function(elm) { side_modals_close(); side_modal_open(button.getAttribute("modal")); }); }); // Close buttons document.querySelectorAll('div.close').forEach(function(close) { close.addEventListener("click", function() { side_modals_close(); }); });
* { margin: 0; } .button { text-decoration: none; color: #000; margin-right: 15px; } .side-modal { width: 35%; width: 300px padding: 40px; position: fixed; height: 100%; overflow-y: scroll; background-color: #fff; top: 0; right: -550px; bottom: 0; align-items: center; justify-content: center; -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1); display: block; transition: all 1s ease; } .modal-content { padding: 20px; } .close { position: absolute; top: 10px; right: 10px; transform: rotate(45deg); font-size: 20px } .darkscale { background-color: rgba(0, 0, 0, 0.1); height: 100vh; }
<body> <div id="overlay"> <a href="#" class="button" modal=".modal-1">modal-1</a> <a href="#" class="button" modal=".modal-2">modal-2</a> </div> <div class="side-modal modal-1"> <div class="modal-content"> <h2>modal-1</h2> <div class="close close-side-modal">+</div> </div> </div> <div id="modal2" class="side-modal modal-2"> <div class="modal-content"> <h2>modal-2</h2> <div class="close close-side-modal">+</div> </div> </div> </body>
跟随鼠标移动透明 div - 如何使页面背景变暗但不使 div 内部变暗？
[英]Moving transparent div that follows mouse - how can I darken the background of a page but not darken the inside of the div?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.