bpopup multiple

Question

'bPopup'이라는 가벼운 jQuery 팝업 플러그인을 사용하고 있습니다. 내가 클릭 할 때 여러 개의 팝업 창을로드하는 순간 내 웹 사이트에서 사용하고 있습니다. 나는 최근에 내가 : 여러 자바 스크립트 '청취자와 함께 다수의 자바 스크립트'청취자 ^^

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

을 즉 여러 팝업을로드하는 나의 코드가 비효율적이라고 들었다. 그리고, 팝업에 대한 :

그는 아마 오른쪽 (그것의 확인),하지만이 구현하거나 심지어 수 있는지 여부 (작은 기회 그가 잘못)하는 방법하지 않도록입니다

<!-- 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 요소에 단일 수신기를 연결하고 selector 매개 변수를 사용하여 이벤트를 자식 (버튼/팝업)에 올바르게 위임합니다. 이 혼란 소리가 나는 경우에

, 간단한 예제 도움이 될 수 있습니다 :

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 속성에서 팝업 ID를 검색하여 표시 할 팝업을 결정합니다.

You can see this example working here.

Answer 2

아래의 기능 (myFunction이는())/앵커 클릭 DIV 태그에 콘텐츠 DIV 디스플레이의 다른 ID를 이드 걸린다. 그리고 모든 팝업 모델에 동일한 스타일을 적용합니다. 또한 새로운 팝업을 열면 이미 열렸던 이전 팝업을 숨 깁니다. 변경할 수있는 모든 팝업 속성.

여기서는 두 개의 팝업에 대해서만 사용했지만 여기서는 많이 사용했습니다.

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