Question

我有两个模式的代码，这些模式最终将用于三个按钮。请注意，我是新手。我可以使代码适用于第一个按钮，但是添加第二个按钮后，两种模式都不起作用。我需要具有不同内容的三个不同模态。请参见下面的代码。请帮忙。

预先感谢您的帮助。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.STRATEGY-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}
/* The Close Button */
.close-STRATEGY {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close-STRATEGY:hover,
.close-STRATEGY:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}


/* Modal Content */
.ANALYZE-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}
/* The Close Button */
.close-ANALYZE {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close-ANALYZE:hover,
.close-ANALYZE:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

</style>
</head>


<body>

<!-- Trigger/Open The Modal -->
<button id="STRATEGYBtn">STRATEGIC PLANNING</button>
<!-- The Modal -->
<div id="STRATEGYModal" class="modal">
  <!-- Modal content -->
  <div class="STRATEGY-content">
    <span class="close-STRATEGY">&times;</span>
    <p>Some text in the Modal..</p>
  </div>
</div>


<!-- Trigger/Open The Modal -->
<button id="ANALYZEBtn">ANALYZE</button>
<!-- The Modal -->
<div id="ANAYLZEModal" class="modal">
  <!-- Modal content -->
  <div class="ANAYLZE-content">
    <span class="close-ANALYZE">&times;</span>
    <p>Some text in the Modal..</p>
  </div>
</div>


<script>
// Get the modal
var modal = document.getElementById('STRATEGYModal');
var modal = document.getElementById('ANALYZEModal');

// Get the button that opens the modal
var btn = document.getElementById("STRATEGYBtn");
var btn = document.getElementById("ANALYZEBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close-STRATEGY")[0];
var span = document.getElementsByClassName("close-ANALYZE")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}
</script>

</body>
</html>

Answer 1

请按照我的解释进行操作

MODAL的CSS代码

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 50%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}

.background_image{
        width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}

不同按钮的代码

<span><a href="#popup2">Make Home Page</a></span>
<span><a href = "#setting">Setting</a></span>
<span id="share"><a href="#popup1">Share</a></span>

不同模态的内容，您只需更改id即可创建任意数量的内容

    <div id="popup1" class="overlay">
            <div class="popup">
            <a class="close" href="#">&times;</a>
            <div class="content">
                <div> your display</div>    
            </div>

            </div>
            </div>
<!--=============================END=POPUP=ONE==============================================-->
            <div id="popup2" class="overlay">
            <div class="popup">
            <a class="close" href="#">&times;</a>
            <div class="content">
                your display
            </div>

            </div>
            </div><!--==================================================END=POPUP=TWO===========================================================-->
            <div id="setting" class="overlay">
            <div class="popup">
            <a class="close" href="#">&times;</a>
            <div class="content">
                <div>
                    your Display



                </div>  
            </div>

            </div>
            </div>

模态不会为2个按钮打开-添加第3个按钮

1 个答案: