CODEWITHSUNDEEP
jquerypopup
stopper
stopper

Reputation: 3

Multiple popup in same page

I'm trying to add two responsive popups in my page but since I'm new in javascript I can't figure out how to modify this code to make it work for both. So far only one works.

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

Upvotes: 0

Views: 1877

Answers (1)

Mo Baqeri
Mo Baqeri

Reputation: 333

I have changed the code and added another button and another popup to load by pressing that new button.

Based on the number of the button which is clicked it will open up the relevant popup. I have used data-number attribute to identify which popup should open up.

I hope this helps.

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>

Upvotes: 1

Related Questions