[錯誤] HTML5，jQuery的 - 燈箱只顯示最新信息

  <html> 
       <head> 
        <title>Quick Simple Light Box</title> 
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
        <style type="text/css"> 

        body 
        { 
         font-family: Helvetica, Arial; 
        } 

        .backdrop 
        { 
         position:absolute; 
         top:0px; 
         left:0px; 
         width:100%; 
         height:100%; 
         background:#000; 
         opacity: .0; 
         filter:alpha(opacity=0); 
         z-index:50; 
         display:none; 
        } 


        .box 
        { 
         position:absolute; 
         top:20%; 
         left:30%; 
         width:500px; 
         height:300px; 
         background:#ffffff; 
         z-index:51; 
         padding:10px; 
         -webkit-border-radius: 5px; 
         -moz-border-radius: 5px; 
         border-radius: 5px; 
         -moz-box-shadow:0px 0px 5px #444444; 
         -webkit-box-shadow:0px 0px 5px #444444; 
         box-shadow:0px 0px 5px #444444; 
         display:none; 
        } 

        .close 
        { 
         float:right; 
         margin-right:6px; 
         cursor:pointer; 
        } 

        </style> 

        <script type="text/javascript"> 

         $(document).ready(function(){ 

          $('.lightbox').click(function(){ 
           $('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear'); 
           $('.box').animate({'opacity':'1.00'}, 300, 'linear'); 
           $('.backdrop, .box').css('display', 'block'); 
          }); 

          $('.close').click(function(){ 
           close_box(); 
          }); 

          $('.backdrop').click(function(){ 
           close_box(); 
          }); 

         }); 

         function close_box() 
         { 
          $('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){ 
           $('.backdrop, .box').css('display', 'none'); 
          }); 
         } 

        </script> 

       </head> 
       <body> 

       <h1>This is my webpage...</h1> 
       <a href="#" class="lightbox">Open Lightbox</a> 

       <div class="backdrop"></div> 
       <div class="box"><div class="close">x</div>This is the lightbox!!!</div> 

       </body> 
      </html>

你好，我和上面的收藏夾代碼的問題。[錯誤] HTML5，jQuery的 - 燈箱只顯示最新信息

它顯然只顯示最新的信息，例如。

   <a href="#" class="lightbox">Open Lightbox</a> 

       <div class="backdrop"></div> 
       <div class="box"><div class="close">x</div>This is the lightbox!!!</div> 




       <a href="#" class="lightbox">Open Lightbox</a> 

       <div class="backdrop"></div> 
       <div class="box"><div class="close">x</div>This is the lightbox123456!!!</div>

它會顯示這是lightbox123456！不管你點擊什麼。

請幫忙，謝謝。

來源

2015-08-03 Yubin Qiu

它實際上顯示兩個，如果您將.box的位置更改爲relative，則可以看到兩個框均顯示。我創建了一個jsfiddle以顯示效果。

當你只希望它顯示了錨固後的框，你可以這樣做：

移動.backdrop到最後身體的，只保留一個，因爲它不會與錨點你點擊。
使用.next()到錨後直接選擇.box，然後使用.add到.backdrop添加到組。
動畫對他們。

如果.backdrop通過單擊的錨變化，我建議包裝都.box和.backdrop到容器中，然後使用$(this).next('.container').find('.box, .backdrop')得到的目標。或者將錨點也包裹在容器中，然後使用$(this).siblings('.box, .backdrop')進行選擇。

$(document).ready(function() { 
 

 
    $('.lightbox').click(function() { 
 
    // Get the target box, and the only backdrop 
 
    
 
    // Because they will apply different opacity, we have to get them separately first. 
 
    var $box = $(this).next('.box'); 
 
    var $backdrop = $('.backdrop'); 
 
    
 
    // Group them. 
 
    var $targets = $box.add($backdrop); 
 
    
 
    // Ensure the targets's display. 
 
    $targets.css('display', 'block'); 
 
    
 
    // Separate the animation of each element if you want different parameters. or chain them. 
 
    $backdrop.animate({ 
 
     'opacity': '.50' 
 
    }, 300, 'linear'); 
 
    $box.animate({ 
 
     'opacity': '1.00' 
 
    }, 300, 'linear'); 
 
    $targets.css('display', 'block'); 
 
    }); 
 

 
    $('.close').click(function() { 
 
    close_box(); 
 
    }); 
 

 
    $('.backdrop').click(function() { 
 
    close_box(); 
 
    }); 
 

 
}); 
 

 
function close_box() { 
 
    $('.backdrop, .box').animate({ 
 
    'opacity': '0' 
 
    }, 300, 'linear', function() { 
 
    $('.backdrop, .box').css('display', 'none'); 
 
    }); 
 
}

body { 
 
    font-family: Helvetica, Arial; 
 
} 
 
.backdrop { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #000; 
 
    opacity: .0; 
 
    filter: alpha(opacity=0); 
 
    z-index: 50; 
 
    display: none; 
 
} 
 
.box { 
 
    position: absolute; 
 
    top: 20%; 
 
    left: 30%; 
 
    width: 500px; 
 
    height: 300px; 
 
    background: #ffffff; 
 
    z-index: 51; 
 
    padding: 10px; 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
    -moz-box-shadow: 0px 0px 5px #444444; 
 
    -webkit-box-shadow: 0px 0px 5px #444444; 
 
    box-shadow: 0px 0px 5px #444444; 
 
    display: none; 
 
} 
 
.close { 
 
    float: right; 
 
    margin-right: 6px; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<a href="#" class="lightbox">Open Lightbox</a> 
 

 

 
<div class="box"> 
 
    <div class="close">x</div>This is the lightbox!!! 
 
</div> 
 
    
 
<a href="#" class="lightbox">Open Lightbox</a> 
 
<div class="box"> 
 
    <div class="close">x</div>This is the lightbox123456!!!</div> 
 

 
<div class="backdrop"></div>

來源

2015-08-03 12:04:00 fuyushimoya

[錯誤] HTML5，jQuery的 - 燈箱只顯示最新信息

回答

相關問題