如何使这个jquery弹出函数可重用

How do I make this jquery popup function reusable?

本文关键字：函数 何使这 jquery      更新时间：2023-09-26

所以我使用的是以下代码：http://jsfiddle.net/xSmNs/

    $(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），但我想知道是否有更有效的方法使用此代码？

您可以将$.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>

这样的东西有帮助吗？

为灯箱按钮提供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

您可以使用以下函数：

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>
相关文章：