Question

我正在尝试向我的页面添加一个半透明的叠加层，以支持多个模式弹出窗口。

这三个弹出框不需要Java脚本即可打开OK，并且在某些Java脚本的帮助下，通过在弹出窗口之外单击鼠标可以关闭它们。不幸的是，如果不阻止“开放模式”按钮，我将无法使用叠加层。我尝试将整个“覆盖” div包裹在所有弹出框周围，并且尝试将弹出窗口保留在覆盖div之外。

有没有一种方法可以解决此问题，而又不会阻止对按钮的访问，也不会弄乱Javascript所促进的“外部关闭”功能？附加了三个文件：“。index.html”，“ style.css”和“ modal-script.js”。抱歉，如果我的术语有时是“家喻户晓”的，但我是公正且热心的，我会尽力而为。

到目前为止，我的代码在同一文档中。如果有任何建议，我将不胜感激。

HTML代码：〜主文件

CSS（样式表）：〜模态环境

JAVASCRIPT：〜弹出框的外部关闭

// JAVASCRIPT FILE: js/modal-script.js
// Closes multi-modals in an HTML page

// SET VARIABLES:
var boxArray = ['box1','box2','box3'];
// LISTEN FOR WINDOW EVENT
window.addEventListener('mouseup', function(event){
  // LOOP...
  for(var i = 0; i < boxArray.length; i++) { 
    var box = document.getElementById(boxArray[i]); 
    // IF...
    if(event.target != box && event.target.parentNode != box){ 
      // THEN...
      box.style.display = 'none';
    }  // END IF/THEN STATEMENT
  }  // END LOOP
});  // END EVENT

/* STYLESHEET FOR MODAL ENVIRONMENT */

/* Pesets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a:link, a:visited {
  text-decoration: none;
}

p {
  margin-top: 0;
}

body {
  font-family: 'Halvetica', Arial, sans-serif; /* Default font family */
}

/* MODAL ENVIRONMENT */
.modal { /* Format the 'modal-window', which is the modal environment background containing the 'modal-box(es)' */
  background: rgba(0, 0, 0, 0.8);
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 10;
  display: none;
}

.modal-content { /* Framework and default settings for popup boxes */
  position: absolute;
  background: #e2e2e2;
  width: 80%;
  height: 60%;
  top: 50%;
  left: 50%;
  padding: 20px;
  transform: translate(-50%, -50%);
  border-radius: 1em;
  display: none;
}

.modal:target { /* Where '.modal' is the target, make it visible */
  display: block;
}

.modal:target .modal-content { /* Where 'modal-content' inside of 'modal' is the target, make both visible */
  display: block;
}

/* MY POPUP BOXES */
#box1 {
  
}

#box2 {
  
}

#box3 {
  
}

/* Formatting: */
.button {
  width: 250px;
  height: 30px;
}

.type_1-button {
  width: 250px;
  height: 30px;
  font-size: 0.9em;
  font-weight: normal;
  color: #000;
  margin: 20px;
}

.type_1-button:hover {
  background: dodgerblue;
  font-size: 1em;
  font-weight: bold;
  color: #fff;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Multi-modal</title>
    <script src="modal-script.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <!--Button controls to trigger pop-up boxes-->
    <button onclick="document.getElementById('box1').style.display = 'block'" class="type_1-button">Open Box 1</button>
    <button onclick="document.getElementById('box2').style.display = 'block'" class="type_1-button">Open Box 2</button>
    <button onclick="document.getElementById('box3').style.display = 'block'" class="type_1-button">Open Box 3</button>
    <!--MODAL CODE-->
    <div id="overlay" class="modal"> <!--Create modal window/environment/background-->
      <!--PROBLEM HERE... WHAT TO DO???-->
    </div> <!--End 'overlay' div and 'modal' class-->
    <!--myBoxes: box1-->
    <div id="box1" class="modal-content"> 
      <h2>Pop-out Interface - Box1</h2> 
    </div> <!--End 'box1'-->
    <!--myBoxes: box2-->
    <div id="box2" class="modal-content"> 
      <h2>Pop-out Interface - Box2</h2>
    </div> <!--End 'box2'-->
    <!--myBoxes: box3-->
    <div id="box3" class="modal-content"> 
      <h2>Pop-out Interface - Box3</h2>
    </div> <!--End 'box3'-->
    <!--END MODAL CODE-->
  </body>
</html>

Answer 1

在点击按钮时，将z-index:11添加到.modal-content类中，并从display:none类中删除.modal或将display:block添加到.modal类中。

如果您还希望在出现模式弹出窗口时也访问3个按钮，请在z-index: 11; position: relative;类中添加.type_1-button。

Answer 2

将z-index:-1;添加到.modal并按如下所示更改一些javascript

// JAVASCRIPT FILE: js/modal-script.js
// Closes multi-modals in an HTML page

// SET VARIABLES:
var boxArray = ['box1','box2','box3'];
// LISTEN FOR WINDOW EVENT
window.addEventListener('mouseup', function(event){
	// LOOP...
	for(var i = 0; i < boxArray.length; i++) { 
		var box = document.getElementById(boxArray[i]); 
		// IF...
		if(event.target != box && event.target.parentNode != box){ 
			// THEN...
      debugger;
			box.style.display = 'none';
		}  // END IF/THEN STATEMENT
	}  // END LOOP
});  // END EVENT
document.getElementById("overlay").addEventListener("click", function(event){
  document.getElementById('overlay').style.display = 'none';
});

/*STYLESHEET FOR MODAL ENVIRONMENT*/

/*Pesets*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a:link, a:visited {
    text-decoration: none;
}
p {
    margin-top: 0;
}
body {
    font-family: 'Halvetica'; Arial, sans-serif; /* Default font family */
}

/*MODAL ENVIRONMENT*/

.modal { /*Format the 'modal-window', which is the modal environment background containing the 'modal-box(es)'*/
	background: rgba(0,0,0,.8);
	position: absolute;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	z-index: 10;
	display: none;
}
.modal-content{ /*Framework and default settings for popup boxes*/
    position: absolute;
    background: #e2e2e2;
    width: 80%;
    height: 60%;
	top: 50%;
	left: 50%;
	padding: 20px;
	transform: translate(-50%,-50%);
	border-radius: 1em;
	display: none;
}
.modal:target { /* Where '.modal' is the target, make it visible */
	display: block;
}
.modal:target .modal-content { /* Where 'modal-content' inside of 'modal' is the target, make both visible */
	display: block;
}

/*MY POPUP BOXES*/
#box1 {
}
#box2 {
}
#box3 {
}

// Formatting:

.button {
	width: 250px;
	height: 30px;
}
.type_1-button {
	width: 250px;
	height: 30px;
	font-size: 0.9em
	font-weight: normal;
	color: #000;
	margin: 20px;
}
.type_1-button:hover {
	background: dodgerblue;
	font-size: 1em;
	font-weight: bold;
	color: #fff;
}
.modal{
  z-index:-1;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Multi-modal</title>
    <script src="modal-script.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  
  <body>
      <!--Button controls to trigger pop-up boxes-->
      <button onclick="document.getElementById('box1').style.display = 'block';document.getElementById('overlay').style.display = 'block'"
          class="type_1-button">Open Box 1</button>
      <button onclick="document.getElementById('box2').style.display = 'block';document.getElementById('overlay').style.display = 'block'"
          class="type_1-button">Open Box 2</button>
      <button onclick="document.getElementById('box3').style.display = 'block';document.getElementById('overlay').style.display = 'block'"
        class="type_1-button">Open Box 3</button>
        
      <!--MODAL CODE-->
      <div id="overlay" class="modal"> <!--Create modal window/environment/background-->
          <!--PROBLEM HERE... WHAT TO DO???-->
      </div> <!--End 'overlay' div and 'modal' class-->
          <!--myBoxes: box1-->
          <div id="box1" class="modal-content"> 
            <h2>Pop-out Interface - Box1</h2> 
          </div> <!--End 'box1'-->
          <!--myBoxes: box2-->
          <div id="box2" class="modal-content"> 
            <h2>Pop-out Interface - Box2</h2>
          </div> <!--End 'box2'-->
          <!--myBoxes: box3-->
          <div id="box3" class="modal-content"> 
            <h2>Pop-out Interface - Box3</h2>
          </div> <!--End 'box3'-->
      <!--END MODAL CODE-->
      
  </body>
</html>

Answer 3

谢谢大家的反馈。我对自己的解决方案不满意，因此在考虑到您所有宝贵的意见的情况下，将其带回“绘图板”。

我的代码现在生成了三个可互换模态的集合，其中有两个用于关闭的选项-按下“ X”符号或用鼠标单击背景。稍后，我将寻找通过[Esc。]键关闭的第三个选项。请告诉我是否有任何推荐的使用转义键关闭的方法。

覆盖窗口在适当的时候打开和关闭，而不会干扰其他元素。我希望这对寻求模态解决方案的人来说是一个值得的榜样。

代码将要遵循。

谢谢大家

Adrian McG

// MODAL CODE
// Open and close multiple modal boxes
// Project Title: Muli-modals */

// GET MODAL-OPEN BUTTONS

var modalBtns = document.querySelectorAll(".modal-open"); // Get 'ALL' buttons with the '.modal-open' class
// Make a forLoop to work for 'each' individual modal button...
modalBtns.forEach(function(btn) { // Create a function called "btn" to work in a forLoop for each one that equals 'modalBtns'
	btn.onclick = function() { // On mouse-click, activate the 'btn' function and let it do the following...
		var modal = btn.getAttribute("data-modal"); // Declare and set a variable called 'modal' to have the same attribute...
		//as any element that has the property of 'data-modal' (attached to the modal buttons)
		document.getElementById(modal).style.display = "block"; // ...then get the 'modal' document, stored in 'data-modal',
		//and set its display style attribute to "block", which will display all elements with the '.modal' class
	}; // End function
}); // End forLoop

// CLOSE MODALS: Method 1 - Close by button click 
// Get all butons with the '.modal-close' class
var closeBtns = document.querySelectorAll(".modal-close");

closeBtns.forEach(function(btn) { // Create a function called "btn" to work in a forLoop
	btn.onclick = function() { // On mouse-click, activate the 'btn' function and let it do the following...
		var modal = btn.closest(".modal").style.display = "none"; // ...then get the 'modal' document, and set its display style
		// attribute to "none", which will make all elements with the '.modal' class invisible
	} // End function
}) // End forLoop and function

// CLOSE MODALS: Method 2 - Close by external click on the overllay window
window.onclick = function(e) { // Creat a function named 'e' (for event) to work on mouse-click event
	if(e.target.className === "modal") { // If the target of the mouse-click event is strictly equivalent to the class 'modal'...
		e.target.style.display = "none"; // ...then get set the targeted element to 'none'; or, in other words, make the
		// modal invisible	
	} // End if/then statement
} // End function

/* Default CSS */

/* PRESETS */

* {
 	margin: 0;
 	 padding: 0;
  	box-sizing: border-box;
  	font-family: 'Halvetica', Arial, sans-serif; /* Default font family */
}
a:link, a:visited { /* Prevents links from automaticilly being underlined, unless otherwide specified */
  text-decoration: none;
}
p {
  margin-top: 0;
}
body {
	margin: 0 auto;
}

/* Main HTML page as starting point */
.container { /* Create a wrapper to center the button objects on screen ...
	... This obviously will change according to main page layout */
	position: fixed;
	width: 500px;
	height: 300px;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background: aqua;
	padding: 20px 20px 0 20px;
}

/* MODAL ENVIRONMENT */

.modal { /* This is the modal window-overlay that masks out the page we started on */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.6);
	animation: modal-open .5s;
	z-index: 200;
	display: none;
}

/*MODAL BOXES AND CONTENT*/
.modal-content { /* The modal box that pops up inside the modal window-overlay */
	position: relative;
	background: #fff;
	width: 400px;
	height: 300px;
	top: 25%;
	left: 50%;
	transform: translate(-50%,-50%);	
	border-radius: 15px;
	z-index: 400;
	display: inline-block;
}
.modal-header {
  	height: 15%;
  	width: 100%;
  	background-color: #284254;
 	padding: 5px 15px; 	
  	border-top-left-radius: 15px;
 	border-top-right-radius: 15px; 
  	border-style: outset; 
  	border-width: medium; 
  	border-color: #7B919D;
  	border-bottom-style: outset; /* Strengthen shadow at bottom-border bevelled edge */
  	border-bottom-width: 4px; /* Strengthen shadow at bottom-border bevelled edge */
  	border-bottom-color: #1F323F; /* Strengthen shadow at bottom-border bevelled edge */ 
	display: inline-block;
}
.modal-body {
	width: 100%;
	height: 72.75%;
	color: #7b7b7b7;
	padding: 15px 0;
    background-color: #fff; 
    background: linear-gradient(#fff, #999); /* Adds gradient to the modal box background,...
    from white (top) to light grey (bottom) */
}
.modal-footer {
	width: 100%;
	height: 12.25%;
	font-size: 14px;
	padding: 5px 15px;	
	border: none;
	outline: none;
	border-radius: 15px;
	color: #1a73e8;
    background-color: #fff; 
    background: linear-gradient(#fff, #999); /* Adds gradient to the modal box background,...
    from white (top) to light grey (bottom) */
}

/*MODAL CONTROLS*/

.modal-open {
	width: 150px;
	height: 30px;
	font-size: 0.9em;
	font-weight: normal;
	color: #000;
}
.modal-open:hover {
	font-size: 1em;
	font-weight: bold;
	background: dodgerblue;
	color: #fff;
}
.modal-close {
	position: relative;
	background: #c3c3c3c;	
	width: 42px;
	height: 42px;
	top: -60px;
	left: 38px;
	border-radius: 50%;
	color: #5b5b5b;
	font-size: 2.5em;
	font-weight: bold;
	line-height: 0.7;
	border: solid aqua 5px;
	box-shadow: 2px 4px 10px #2d2d2d;
	float: right;	
	display: inline-block;
}
.modal-close:hover {
	background: #5b5b5b;
	color: #c3c3c3;
}

/*FONTS AND PARAGRAPH SPACING*/
.modal-header-text {
	font-size: 1.15em;
  	font-weight: bold;
  	text-align: left;
 	 color: #00FFFF;
 	 margin: 5px 5px 5px 5px;
} 
.modal-heading{
 	height: 40px;
  	font-size: 1.25em;
 	font-weight: bold;
  	color: dodgerblue;
  	text-align: center;
 	margin: 6px 5px 0 5px;
  	}  
.modal-paragraph{
  	font-size: 1em;
  	color: #000000;
  	line-height: 1.5em;
  	text-align: center;
  	margin: 0px 5px 10px 5px;
}
.modal-footer-text {
  	font-size: 0.9em;
  	font-weight: normal;
 	font-style: italic;
 	text-align: center;
 	color: #000000;
  	margin: 5px 5px 5px 5px;
}

/*Footer Anchor Links - /*Anchor-link behaviour in footer*/  
.modal-footer-text a:link {
  color: #6900CC;
  text-decoration: none;
  background-color:  transparent;
  }   
.modal-footer-text a {
  color: #6900CC;
  }   
.modal-footer-text a:visited {
  color: #505050;
  text-decoration: none;
  background-color: transparent;
  }      
.modal-footer-text a:hover {
  color: #0000FF;
  text-decoration: underline;
  background-color: transparent;
  }   
.modal-footer-text a:selected {
  color: #0000FF;
  font-weight: bold;
  text-decoration: none;
  background-color: transparent;
  }

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <meta name="dcterms.created" content="Tue, 05 Feb 2019 11:43:55 GMT">
      <title>Multi-modals</title>
      <!--JAVASCRIPT-->
      	<!--Microsoft Internet Explorer - Finds free sourcecode to translate old versions-->
  	        <!--[if IE]>
  	            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  	        <![endif]-->	
      <!--STYLESHEETS-->
      <link rel="stylesheet" type="text/css" href="css/modal-style.css" /> 
      <!--END STYLESHEETS-->
  </head>

  <body>
    <div class="container">
    <!--BUTTONS TO TRIGGER MODALS-->
    <button class="modal-open" data-modal="search">Search</button>
    <button class="modal-open" data-modal="login">Log-in/Sign-up!</button>
    <button class="modal-open" data-modal="spare">Spare</button>
    </div> <!--End 'container' div-->

    <!--MODAL CODE-->
    
    <!--Modal 1-->
    <div class="modal" id="search"> <!--Overlay window to act as backdrop to the modal box-->
      <div class="modal-content"> <!--Format layout and content of modal box-->
        <div class="modal-header"> <!--Format the modal box header-->
          <h1 class="modal-header-text">Modal: Search eruditeAlpha.com</h1>
          <button class="modal-close">&times;</button> <!--Button to close modal--> 
        </div><!--End modal header-->
        <div class="modal-body"> <!--Format the modal box body content-->
          <h2 class="modal-heading">Search Contents</h2>
          <p class="modal-paragraph">This modal is not yet fully functional...</p>
        </div> <!--End modal body-->
        <div class="modal-footer"> <!--Format the modal box footer-->
          <p class="modal-footer-text">Follow me at 
          <a href="http://adrian-mcglinchey.blogspot.com/" target="blank">
          "Adrian's Write"</a> blog space...</p>
        </div>  <!--End modal footer-->
      </div> <!--End modal content-->
    </div> <!--End 'modal1' overlay/backdrop-->

    <!--Modal 2-->
    <div class="modal" id="login"> <!--Overlay window to act as backdrop to the modal box-->
      <div class="modal-content"> <!--Format layout and content of modal box-->
        <div class="modal-header"> <!--Format the modal box header-->
          <h1 class="modal-header-text">Modal: Log-in / Sign-up!</h1>
          <button class="modal-close">&times;</button> <!--Button to close modal-->
        </div><!--End modal header-->
        <div class="modal-body"> <!--Format the modal box body content-->
          <h2 class="modal-heading">Members' Area</h2>
          <p class="modal-paragraph">This modal is not yet fully functional...</p>             
        </div> <!--End modal body-->
        <div class="modal-footer"> <!--Format the modal box footer-->
          <p class="modal-footer-text">Follow me at
          <a href="http://adrian-mcglinchey.blogspot.com/" target="blank">
          "Adrian's Write"</a> blog space...</p>
        </div>  <!--End modal footer-->
      </div> <!--End 'modal2' content-->
    </div> <!--End 'modal2' overlay/backdrop-->

    <!--Modal 3-->
    <div class="modal" id="spare"> <!--Overlay window to act as backdrop to the modal box-->
      <div class="modal-content"> <!--Format layout and content of modal box-->
        <div class="modal-header"> <!--Format the modal box header-->
          <h1 class="modal-header-text">Modal: Spare</h1>
          <button class="modal-close">&times;</button> <!--Button to close modal-->
        </div><!--End modal header-->
        <div class="modal-body"> <!--Format the modal box body content-->
          <h2 class="modal-heading">Keep in Reserve</h2>
          <p class="modal-paragraph"> This modal is not yet fully functional...</p>
        </div> <!--End modal body-->
        <div class="modal-footer"> <!--Format the modal box footer-->
          <p class="modal-footer-text">Follow me at <a href="http://adrian-mcglinchey.blogspot.com/"
          target="blank">
          "Adrian's Write"</a> blog space...</p>
        </div>  <!--End modal footer-->
      </div> <!--End 'modal2' content-->
    </div> <!--End 'modal3' overlay/backdrop-->
      
    <!--JAVASCRIPT CODE FILE-->
    <!--External closing of modal popup boxes-->
    <script src="js/modal-script.js" type="text/javascript"></script>

  </body>
</html>

说了这么多，请大家建设性地发表评论，人们，如果我犯了错误，请不要对我太苛刻。我是网络开发爱好者，而不是webGuru。

再次感谢

Adrian McG

HTML / CSS / JS-模式弹出窗口的叠加背景-问题

3 个答案: