如何讓這個jquery彈出函數可重用？

-1

所以我用這個代碼： http://jsfiddle.net/xSmNs/如何讓這個jquery彈出函數可重用？

$(document).ready(function() { 

     $('#lightbox_button').click(function() { 
      $('#lightbox').fadeIn('slow'); 
      $('#lightbox_panel').fadeIn('slow'); 
     }); 

     $('#close_lightbox').click(function() { 
      $('#lightbox').fadeOut('slow'); 
      $('#lightbox_panel').fadeOut('slow'); 
     }); 

    });

要上的鏈接的點擊彈出窗口。我想要多個鏈接輸出不同的div。我只是做了這個代碼的多個實例（改變ID，以便按鈕打開它們相應的div），但我想知道是否有更有效的方法使用此代碼？

來源

2015-11-06 jb3 Hd

如果你已經多個彈出窗口使用他們共同的階級和綁定的類的事件。還使用'data- *'屬性來存儲相關信息。檢查[Demo]（http://jsfiddle.net/tusharj/xSmNs/23/） – Tushar

你真的在使用jQuery 1.4.4嗎？這已經過了將近6年了！ –

您可以使用$ .fn.lightbox作爲函數本身並將其應用於DOM對象。

http://jsfiddle.net/7rfpwctm/2/

$(document).ready(function() { 
 

 
    $.fn.lightbox = function(){ 
 
     $(this).click(function() { 
 
     $('#lightbox').fadeIn('slow'); 
 
     $('#lightbox_panel').fadeIn('slow'); 
 
    }); 
 

 
    $('#close_lightbox').click(function() { 
 
     $('#lightbox').fadeOut('slow'); 
 
     $('#lightbox_panel').fadeOut('slow'); 
 
    }); 
 
     
 
    }; 
 

 
    
 
    $('#lightbox_button').lightbox(); 
 
    $('#another_lightbox_button').lightbox(); 
 

 
     
 
});

#lightbox_panel 
 
{ 
 
    position: relative; 
 
    z-index: 99; 
 
    width: 500px; 
 
    height: 100px; 
 
    margin: 30px auto 0; 
 
    background-color: #CCC; 
 
    display: none; 
 
    padding: 10px; 
 
} 
 

 
#lightbox 
 
{ 
 
    z-index: 90; 
 
    position: absolute; 
 
    background-color: #000; 
 
    opacity: 0.8; 
 
    filter: alpha(opacity=80); 
 
    width: 100%; 
 
    height: 100%; 
 
    display: none; 
 
    top: 0; 
 
} 
 

 

 

 
#close_lightbox 
 
{ 
 
    
 
} 
 
#lightbox_button{ 
 
    position:absolute; 
 
    left:0; 
 
    top:100%; 
 
    width:200px; 
 
} 
 

 
#another_lightbox_button{ 
 
    position:absolute; 
 
    right:0; 
 
    top:100%; 
 
    width:400px; 
 
} 
 

 
.button 
 
{ 
 
    position: absolute; 
 
    text-decoration: none; 
 
    padding: 2px 10px; 
 
    border: 1px solid #000; 
 
    display: inline-block; 
 
    bottom: 10px; 
 
    left: 50%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    
 
    
 
    
 
    <a href="#" id="lightbox_button"> 
 
     <div class="button">button</div> 
 
    </a> 
 
     
 
     <a href="#" id="another_lightbox_button"> 
 
     <div class="button">another button</div> 
 
    </a> 
 
     
 
    
 
    <div id="lightbox_panel"> 
 
     
 
     <h1>lightbox panel</h1> 
 
    
 
     <a href="#" id="close_lightbox"> 
 
      <div class="button">close</div> 
 
     </a> 
 
    
 
    </div> 
 
    
 
</div> 
 

 
<div id="lightbox"></div>

像這樣幫助？

來源

2015-11-06 08:50:46

給燈箱按鈕2個數據屬性，這些數據屬性指向在點擊時需要彈出的div。對所有燈箱按鈕也使用普通的類。

<a href="#" class="lightbox_button" data-box="#lightbox" data-panel="#lightbox_panel"> 
     <div class="button" >button</div> 
    </a>

然後你就可以重新使用的代碼一樣，

$('.lightbox_button').click(function() { 
    $($(this).data("box")).fadeIn("slow"); 
    $($(this).data("panel")).fadeIn("slow"); 
});

Fiddle

來源

2015-11-06 08:51:04

您可以使用此功能：

function doModal(boxid,show) { 
    if (show) { 
     $('#'+boxid).fadeIn('slow'); 
     $('#'+boxid+'_panel').fadeIn('slow'); 
    } else { 
     $('#'+boxid).fadeOut('slow'); 
     $('#'+boxid+'_panel').fadeOut('slow'); 
    } 
}

，然後在你的按鈕或鏈接：

<span onclick="doModal('Box1',true)">Open Box 1</span> 
<span onclick="doModal('Box2',true)">Open Box 2</span>

爲了閉合箱：

<span onclick="doModal('Box1',false)">Close Box 1</span> 
<span onclick="doModal('Box2',false)">Close Box 2</span>

來源

2015-11-06 08:51:42 navigator

如何讓這個jquery彈出函數可重用？

回答

相關問題