Question

所以我使用这段代码： 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）但是我想知道是否有更有效的方法使用此代码？

Answer 1

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

这样的事情有帮助吗？

Answer 2

给灯箱按钮2个数据属性，指向点击时需要弹出的div。还要为所有灯箱按钮使用通用类。

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

然后你可以重复使用像

这样的代码

<% @branch.each do |branch| %>
  <ul>
    <%= check_box_tag 'branch_ids[]', branch.id, @user_branches.map(&:branch_id).include?(branch.id) %>
    <%= branch.name -%>
  </ul>
<% end %>

here

Answer 3

您可以使用此功能：

$(OBJROOT)/UninstalledProducts/$(PLATFORM_NAME)/include

然后在你的按钮或链接上：

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>

如何使这个jquery弹出功能可重用？

3 个答案: