同一页面中的多个弹出窗口

Question

我正在尝试在我的页面中添加两个响应式弹出窗口，但由于我是 javascript 的新手，所以我无法弄清楚如何修改此代码以使其对两者都有效。目前只有一个有效。

jQuery(document).ready(function($){
  //open popup
  $('.popup-trigger').on('click', function(event){
    event.preventDefault();
    $('.popup').addClass('is-visible');
  });
  
  //close popup
  $('.popup').on('click', function(event){
    if( $(event.target).is('.popup-close') || $(event.target).is('.popup') ) {
      event.preventDefault();
      $(this).removeClass('is-visible');
    }
  });
  //close popup when clicking the esc keyboard button
  $(document).keyup(function(event){
      if(event.which=='27'){
        $('.popup').removeClass('is-visible');
      }
    });
});

body {
  font-family:'Roboto';
}

.popup-trigger {
  display: block;
  width: 170px;
  right: 2rem;
  margin: 3em auto;
  text-align: center;
  color: #FFF;
  font-size: 18px;
  padding:1rem 2rem;
  text-decoration:none;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 50em;
  background: #35a785;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.07);
  transition:300ms all;
}

.popup-trigger:hover {
    opacity:.8;
}

.popup {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  z-index: 1000;
  width: 100%;
  background-color: rgba(94, 110, 141, 0.9);
  opacity: 0;
  visibility: hidden;
  transition:500ms all;

}

.popup.is-visible {
  opacity: 1;
  visibility: visible;
 transition:1s all;
}

.popup-container {
  transform:translateY(-50%);
  transition:500ms all;
  position: relative;
  width: 40%;
  margin: 2em auto;
  top: 5%;
  padding:5rem;
  background: #FFF;
  border-radius: .25em .25em .4em .4em;
  text-align: center;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.is-visible .popup-container {
  transform:translateY(0);
  transition:500ms all;
}

.popup-container .popup-close {
  position: absolute;
  top: 8px;
  font-size:0;
  right: 8px;
  width: 30px;
  height: 30px;
}


.popup-container .popup-close::before,
.popup-container .popup-close::after {
  content: '';
  position: absolute;
  top: 12px;
  width: 14px;
  height: 3px;
  background-color: #8f9cb5;
}

.popup-container .popup-close::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  left: 8px;
}

.popup-container .popup-close::after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  right: 8px;
}


.popup-container .popup-close:hover:before,
.popup-container .popup-close:hover:after {
  background-color:#35a785;
  transition:300ms all;
}

<a href="#0" id="info" class="info popup-trigger" title="info">Popup</a>

<div class="popup" role="alert">
  <div class="popup-container">
    <a href="#0" class="popup-close img-replace">Close</a>
    <h1>Responsive Popup</h1>
  </div> 
</div> 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Codepen link

Answer 1

我已经更改了代码并添加了另一个按钮和另一个弹出窗口以通过按下那个新按钮来加载。

根据点击按钮的编号，它会打开相关的弹出窗口。我已经使用数据编号属性来确定应该打开哪个弹出窗口。

希望对您有所帮助。

jQuery(document).ready(function($){
      //open popup
      $('.popup-trigger').on('click', function(event){
        event.preventDefault();
        var number = $(this).data("number");
        $('.popup.popup-'+number).addClass('is-visible');
      });
      
      //close popup
      $('.popup').on('click', function(event){
        if( $(event.target).is('.popup-close') || $(event.target).is('.popup') ) {
          event.preventDefault();
          $(this).removeClass('is-visible');
        }
      });
      
      //close popup when clicking the esc keyboard button
      $(document).keyup(function(event){
          if(event.which=='27'){
            $('.popup').removeClass('is-visible');
          }
        });
    });

body {
      font-family:'Roboto';
    }

    .popup-trigger {
      display: block;
      width: 170px;
      right: 2rem;
      margin: 3em auto;
      text-align: center;
      color: #FFF;
      font-size: 18px;
      padding:1rem 2rem;
      text-decoration:none;
      font-weight: bold;
      text-transform: uppercase;
      border-radius: 50em;
      background: #35a785;
      box-shadow: 0 3px 0 rgba(0, 0, 0, 0.07);
      transition:300ms all;
    }

    .popup-trigger:hover {
        opacity:.8;
    }

    .popup {
      position: fixed;
      left: 0;
      top: 0;
      height: 100%;
      z-index: 1000;
      width: 100%;
      background-color: rgba(94, 110, 141, 0.9);
      opacity: 0;
      visibility: hidden;
      transition:500ms all;

    }

    .popup.is-visible {
      opacity: 1;
      visibility: visible;
     transition:1s all;
    }

    .popup-container {
      transform:translateY(-50%);
      transition:500ms all;
      position: relative;
      width: 40%;
      margin: 2em auto;
      top: 5%;
      padding:5rem;
      background: #FFF;
      border-radius: .25em .25em .4em .4em;
      text-align: center;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    }

    .is-visible .popup-container {
      transform:translateY(0);
      transition:500ms all;
    }

    .popup-container .popup-close {
      position: absolute;
      top: 8px;
      font-size:0;
      right: 8px;
      width: 30px;
      height: 30px;
    }


    .popup-container .popup-close::before,
    .popup-container .popup-close::after {
      content: '';
      position: absolute;
      top: 12px;
      width: 14px;
      height: 3px;
      background-color: #8f9cb5;
    }

    .popup-container .popup-close::before {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
      left: 8px;
    }

    .popup-container .popup-close::after {
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
      right: 8px;
    }


    .popup-container .popup-close:hover:before,
    .popup-container .popup-close:hover:after {
      background-color:#35a785;
      transition:300ms all;
    }

<a href="#0" id="info_1" class="info popup-trigger" data-number="1" title="info">Popup 1</a>
<a href="#0" id="info_2" class="info popup-trigger" data-number="2" title="info">Popup 2</a>

    <div class="popup popup-1" role="alert">
      <div class="popup-container">
        <a href="#0" class="popup-close img-replace">Close</a>
        <h1>Responsive Popup 1</h1>
      </div> 
    </div> 
    <div class="popup popup-2" role="alert">
      <div class="popup-container">
        <a href="#0" class="popup-close img-replace">Close</a>
        <h1>Responsive Popup 2</h1>
      </div> 
    </div> 

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

同一页面中的多个弹出窗口

Multiple popup in same page

jquery

popup