Question

我已经创建了一个工作正常的模态框，但是当我将其应用于其他元素时，它只适用于第一个元素。这些元素是不同的图像，当您单击打开每个模式框中包含不同信息的模式框时

这是url

如果你能有人帮我解决这个问题，我们将非常感激。

谢谢，

这是HTML：

<div id="myBtn">
  <div class="container-team">
    <img src="http://allaboutgroup.isabelsaez.co.uk/wp-content/uploads/2017/09/image-normal.jpg" class="image-person">
    <img src="http://allaboutgroup.isabelsaez.co.uk/wp-content/uploads/2017/09/image-hover.jpg" class="overlay-person">
    <div class="centered">Jack Denton</div>
  </div>
</div>


<!-- The Modal -->
<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">×</span>
    <aside>
      <div class="photo-person-modal-box">
        <img src="https://i.stack.imgur.com/7UL6j.jpg">
      </div>

      <div class="connect-modal-box">
        <div class="social-icon-modal-box">
          <div class="container-social-icon">
            <a href="mailto:jack.denton@allaboutgroup.org" ><img src="http://allaboutgroup.isabelsaez.co.uk/wp-content/uploads/2017/09/email-white.png" width="40px" height="40px" class="icon-normal"></a>
            <a href="mailto:jack.denton@allaboutgroup.org" ><img src="http://allaboutgroup.isabelsaez.co.uk/wp-content/uploads/2017/09/email-white-hover-f.png" width="40px" height="40px" class="icon-hover"></a>
          </div>


          <div class="container-social-icon">
            <a href="tel:0203-651-4919"><img src="http://allaboutgroup.isabelsaez.co.uk/wp-content/uploads/2017/09/phone-white.png" width="40px" height="40px" class="icon-normal"></a>
            <a href="tel:0203-651-4919"><img src="http://allaboutgroup.isabelsaez.co.uk/wp-content/uploads/2017/09/phone-white-hover-f.png" width="40px" height="40px" class="icon-hover"></a>
          </div>


          <div class="container-social-icon">
            <a href="https://www.linkedin.com/in/jackwilliamdenton/" target="blank"><img src="http://allaboutgroup.isabelsaez.co.uk/wp-content/uploads/2017/09/linkedin-white.png" width="40px" height="40px" class="icon-normal"></a>
            <a href="https://www.linkedin.com/in/jackwilliamdenton/" target="blank"><img src="http://allaboutgroup.isabelsaez.co.uk/wp-content/uploads/2017/09/linkedin-white-hover-f.png" width="40px" height="40px"  class="icon-hover"></a>
          </div>


          <div class="container-social-icon">
            <a href="https://twitter.com/Jack_AAG" target="blank"><img src="http://allaboutgroup.isabelsaez.co.uk/wp-content/uploads/2017/09/twitter-white.png" width="40px" height="40px" class="icon-normal"></a>
            <a href="https://twitter.com/Jack_AAG" target="blank"><img src="http://allaboutgroup.isabelsaez.co.uk/wp-content/uploads/2017/09/twitter-white-hover-f.png" width="40px" height="40px"  class="icon-hover"></a>
          </div>

        </div>
      </div>
    </aside>

    <div class="description-modal-box">
      <header class="header-modal-box">
        <div class="name-modal-box">
          <strong>JACK DENTON</strong>
        </div>
        <div class="role-modal-box"> CO-FOUNDER</div>
      </header>

      <div class="content-modal-box">
        <div class="quote-modal-box">The big dog, the raconteur, the linguaphile.
        </div>
        <div class="question-modal-box">Worst job after graduating?</div>
        <div class="text-modal-box">Working on a chicken farm. Have you seen Napoleon Dynamite? It’s like that but worse. Dead chickens in bins a metre from where I was working, stifling heat and constant attacks from angry cockerels. It was alright, though, because they were paying me £3 an hour.
        </div>
      </div>
    </div>
  </div>
</div>

这是JavaScript：

<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on 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";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

</script>

这是CSS：

/*__________________MODALBOX__________*/



/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 4; /* Sit on top */
    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(3,134,221,0.30); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #ffffff;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 0px;
    width: 70%; /* Could be more or less, depending on screen size */
height: 28.75rem;
}

/* The Close Button */
.close {
color: #ffffff;
    float: right;
    font-size: 50px;
    font-weight: bold;
    height: 60px;
    width: 60px;
    position: relative;
    background-color: #019ee3;
    border-radius: 50%;
    box-shadow: rgba(35,35,35,0.2) -1px 1px 8px ;
    padding: 15px 15px;
    text-decoration: none;
    margin: -20px -20px 20px;
transition: all 1s ease-in-out 0s;

}

.close:hover, .close:focus {
    text-decoration: none;
    cursor: pointer;
transform: rotate(360deg);
    transition: all 1s ease-in-out 0s;

}

Answer 1

我认为你需要像类一样使用myBtn

<div class="myBtn">

...

模态框适用于一个元素，但不适用于其他元素

1 个答案: