bpopup multiple

Question

Я использую легкий всплывающий плагин jQuery под названием «bPopup». Я использую его на своем веб-сайте, чтобы загрузить несколько всплывающих окон при нажатии. Я недавно сказал, что мой код был неэффективным, поскольку я загружал несколько всплывающих окон с несколькими JavaScript «слушателей», т.е .:

<script type="text/javascript"> 
;(function($) { 
    $(function() { 
     $('#my-button_1').bind('click', function(e) { 
      e.preventDefault(); 
      $('#element_to_pop_up_32754925023').bPopup(); 
     }); 
    }); 
})(jQuery); 
</script> 

<script type="text/javascript"> 
;(function($) { 
    $(function() { 
     $('#my-button_2').bind('click', function(e) { 
      e.preventDefault(); 
      $('#element_to_pop_up_95031153149').bPopup(); 
     }); 
    }); 
})(jQuery); 

^^ слушатели 'множественного JavaScript. И для Popups:

<!-- Button that triggers the popup --> 
<a class="main" id="my-button_1" href="#">Popup 1</a></b><br /> 
<!-- Element to pop up --> 
<div id="element_to_pop_up_1"> 
// ... 
</div> 


<!-- Button that triggers the popup --> 
<a class="main" id="my-button_1" href="#">Popup 1</a></b><br /> 
<!-- Element to pop up --> 
<div id="element_to_pop_up_1"> 
// ... 
</div> 

Он, вероятно, прав (уверен в этом), но не знаете, как это реализовать, или же это вообще возможно (маленький шанс, что он не прав).

Помощь? И спасибо!

Answer 1

Поскольку вы используете jquery, вы должны использовать его on() method, чтобы прикрепить один прослушиватель к родительскому элементу DOM и использовать параметр селектора для надлежащего делегирования события его дочерним элементам (кнопка/всплывающие окна).

Если это звучит странно, простой пример может помочь:

HTML:

<div id="parent"> 
    <a href="popup1" class="button">Show popup 1</a> 
    <div id="popup1" class="popup">1</div> 

    <a href="popup2" class="button">Show popup 2</a> 
    <div id="popup2" class="popup">2</div> 

    <a href="popup3" class="button">Show popup 3</a> 
    <div id="popup3" class="popup">3</div> 

    <a href="http://www.google.com/" target="_blank">Non-popup link</a> 
</div> 

JS:

$('#parent').on('click', 'a.button', function (event) { 
    event.stopPropagation(); 
    event.preventDefault(); 

    var popup = $(this).attr('href'); 
    $('#'+popup).bPopup(); 
}); 

Это добавляет один слушатель событий на родителе элемент, который запускается только в том случае, если дочерний элемент, вызвавший событие, соответствует селектор (в данном случае a.button). Он определяет, какое всплывающее окно отображается, возвращая идентификатор всплывающего окна из атрибута href.

You can see this example working here.

Answer 2

В приведенных ниже функциях (туРипсЫоп()) принимает идентификатор якоря/DIV тег, который щелкнул и другой идентификатор сНа контента, чтобы быть дисплей. И применяет тот же стиль для всех всплывающих моделей. А также он скрывает старое всплывающее окно, которое уже открылось, когда вы открываете новое всплывающее окно. Все всплывающие свойства, которые вы можете изменить.

Здесь я использовал только два всплывающих окна, но вы можете использовать его для многих, так же, как и здесь.

<script type="text/javascript"> 


function myFunction(whId,whtDivContent,e) { 
    //var totWidth = $(document).width(); 
    //var marTop = position.top; 
    var elt = $(whId); 
    var position = elt.position(); 
    var marLeft = position.left - 130; 

    if(marLeft <= 1) { 
     marLeft = 10; 
    } 

    var openModal_profile ='#openModal_profile'; 
    var openModal_menu ='#openModal_menu'; 

    // Prevents the default action to be triggered. 
    e.preventDefault(); 

    $(whtDivContent).bPopup({ 
     position: [marLeft, 0] //x, y 
     ,opacity: 0.9 
     ,closeClass : 'b-close' 
     ,zIndex: 2 
     ,positionStyle: 'fixed' //'fixed' or 'absolute' 'relative' 
     ,follow: [false,false] //x, y 
     ,onOpen: function() { 
      if(openModal_profile == whtDivContent) { 
       $(openModal_menu).bPopup().close(); 
      } 
      else if(openModal_menu == whtDivContent) { 
       $(openModal_profile).bPopup().close(); 
      } 

      $(whId).css({'background-color':"#DFDFDF"}); 
     } 
     ,onClose: function() { $('.close').click(); $(whId).css({'background-color':""}); } 

    }); 
} 



     ;(function($) { 
        // DOM Ready 
        $(function() { 
         // From jQuery v.1.7.0 use .on() instead of .bind() 
         //$(id_menu).on('click',function(e) {} 

         var id_menu = '#id_menu'; 
         var openModal_menu ='#openModal_menu'; 
         $(id_menu).toggle(function(e) { 
          //$(id_menu).css({'background-color':"#DFDFDF"}); 
          myFunction(id_menu,openModal_menu,e); 
         },function(e){ 
          //$(id_menu).css({'background-color':""}); 
          $('.close').click(); 
          $(openModal_menu).bPopup().close(); 

         }); 

         var id_profile = '#id_profile'; 
         var openModal_profile ='#openModal_profile'; 
         $(id_profile).toggle(function(e) { 
          //$(id_profile).css({'background-color':"#DFDFDF"}); 
          myFunction(id_profile,openModal_profile,e); 
         },function(e){ 
          //$(id_profile).css({'background-color':""}); 

          $(openModal_profile).bPopup().close(); 
         }); 

        //ENDS HERE  
        }); 
       })(jQuery); 
      </script>