简化多个元素的功能

Question

我有多个模态窗口可以使用几乎相同的功能。

我问自己是否可以按照我不必为每个新模态窗口重复功能的方向重写功能。

基本上，每个模态窗口都有两个唯一的选择器：

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

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

的jsfiddle

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

以下是完整的代码：

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

请参阅以下代码更改。的 DEMO

• 我更改了链接类名称以匹配模式窗口ID 名。即aiohttp和#modal1。因此当你点击链接时 ，你可以获得点击链接的类并将其应用为弹出窗口 窗口ID并打开它。
• 当您点击“关闭”时，它会查找.modal1类并删除附加到其上的.loginbox-user-modal类。

<强> HTML：

visible

<强> JS

<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>

＆＃13;

＆＃13;

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');
    }
  });  

});

＆＃13;

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');
    }
  });  

});

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;