Simplify a function for multiple elements

Question

I have multiple modal windows that work with nearly the same function.

I'm asking myself is it possiibe to rewrite the function in the direction that I don't have to repeat the function for each new modal window.

Basicially I have two unique selectors for each modal window:

// Modal window
var $modal1 = $('#modal1');

// button that open the modal window
var $modal1form = $('.openmodel1');

JSFIDDLE

https://jsfiddle.net/n5yc7kgz/1/

And here is the complete code:

jQuery(document).ready(function($) {

  // modal1 

  var $modal1 = $('#modal1'),
    $modal1form = $('.openmodel1');


  $modal1form.on('click', function(event) {

    if ($(event.target).is($modal1form)) {
      $(this).children('ul').toggleClass('is-visible');
    } else {
      $modal1form.children('ul').removeClass('is-visible');
      $modal1.addClass('is-visible');
    }

  });

  $('.modalbox').on('click', function(event) {
    if ($(event.target).is($modal1) || $(event.target).is('.close')) {
      $modal1.removeClass('is-visible');
    }
  });
  $(document).keyup(function(event) {
    if (event.which == '27') {
      $modal1.removeClass('is-visible');
    }
  });

  // modal2 
  var $modal2 = $('#modal2'),
    $modal2form = $('.openmodel2');

  // Offerform
  $modal2form.on('click', function(event) {

    if ($(event.target).is($modal2form)) {
      $(this).children('ul').toggleClass('is-visible');
    } else {
      $modal2form.children('ul').removeClass('is-visible');
      $modal2.addClass('is-visible');
    }

  });

  $('.modalbox').on('click', function(event) {
    if ($(event.target).is($modal2) || $(event.target).is('.close')) {
      $modal2.removeClass('is-visible');
    }
  });
  $(document).keyup(function(event) {
    if (event.which == '27') {
      $modal2.removeClass('is-visible');
    }
  });

});

Answer 1

Please see the below code changes. DEMO

• I have changed the link class names to match the modal window id names. i.e #modal1 and .modal1. Hence when u click on the link ,you can get the clicked link s class and apply it as the pop up window id and open it.
• And when u click on close , it looks for the .loginbox-user-modal class and removes the visible class attached to it.

HTML:

<div id="modal1" class="loginbox-user-modal">
    <div class="loginbox-user-modal-container">
        <div class="loginbox"> 
        <span class="icon-close">close</span>
        Modal 1 
        </div>
    </div>  
</div>     


<div id="modal2" class="loginbox-user-modal">
    <div class="loginbox-user-modal-container">     
        <div class="loginbox"> 
        <span class="icon-close">close</span>
        Modal 1  
        </div> 
    </div>  
</div>  

<div class="modal1"><a href="#">modal1</a></div>//changed the class name to modal1, similar to the modal window id name
<div class="modal2"><a href="#">modal2</a></div>

JS

jQuery(document).ready(function($) {   

  $('.modal1, .modal2').on('click', function(event) {

    var $modal = $('#'+$(this).attr("class")),
    $modalform = $('.'+$(this).attr("class"));
    if ($(event.target).is($modalform)) {
      $(this).children('ul').toggleClass('is-visible');
    } else {
      $modalform.children('ul').removeClass('is-visible');
      $modal.addClass('is-visible');
    }

  });


  $('.loginbox').on('click', function(event) {  
    if ( $(event.target).is('.icon-close')) {
      $('.loginbox-user-modal').removeClass('is-visible');
    }
  });
  $(document).keyup(function(event) {
    if (event.which == '27') {
      $('.loginbox-user-modal').removeClass('is-visible');
    }
  });  

});

jQuery(document).ready(function($) {

  $('.modal1, .modal2').on('click', function(event) {

    var $modal = $('#'+$(this).attr("class")), $modalform = $('.'+$(this).attr("class"));
    if ($(event.target).is($modalform)) {
      $(this).children('ul').toggleClass('is-visible');
    } else {
      $modalform.children('ul').removeClass('is-visible');
      $modal.addClass('is-visible');
    }

  });
   

  $('.loginbox').on('click', function(event) {  
    if ( $(event.target).is('.icon-close')) {
      $('.loginbox-user-modal').removeClass('is-visible');
    }
  });
  $(document).keyup(function(event) {
    if (event.which == '27') {
      $('.loginbox-user-modal').removeClass('is-visible');
    }
  });  

});

.loginbox {
  width: 500px;
  height: 500px;
  background: #fff;
}


.loginbox-user-modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #111;
  z-index: 30000;
  overflow-y: auto;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s;
}

.loginbox-user-modal.is-visible {
  visibility: visible;
  opacity: 1;
}

.loginbox-user-modal.is-visible .loginbox-user-modal-container {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

.loginbox-user-modal-container {
  position: relative;
  width: 100%;
  max-width: 700px;
  margin: 3em auto 4em;
  cursor: auto;
  box-sizing: border-box;
  margin-top: 50px !important;
  -webkit-transform: translateY(-30px);
  -moz-transform: translateY(-30px);
  -ms-transform: translateY(-30px);
  -o-transform: translateY(-30px);
  transform: translateY(-30px);
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
}



.icon-close {
  width: 40px;
  height: 40px;
  line-height: 40px !important;
  text-align: center;
  border-radius: 50%;
  font-size: 18px;
  transition: background-color 0.2s;
  cursor: pointer;
  color: #777;
  position: absolute;
  z-index: 1000000;
  right: 24px;
  top: 37px;
}

.icon-close:hover {
  background: #f5f5f5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="modal1" class="loginbox-user-modal">
	<div class="loginbox-user-modal-container">
		<div class="loginbox"> 
		<span class="icon-close">close</span>
		Modal 1 
		</div>
	</div>  
</div>     


<div id="modal2" class="loginbox-user-modal">
	<div class="loginbox-user-modal-container">     
		<div class="loginbox"> 
		<span class="icon-close">close</span>
		Modal 1  
		</div> 
	</div>  
</div>  
<div class="modal1"><a href="#">modal1</a></div><!--changed the class name to modal1, similar to the modal window id name-->
<div class="modal2"><a href="#">modal2</a></div>