關閉JQuery圖片點擊外部div

我想能夠關閉隱藏顯示彈出式畫廊3種方式：點擊圖像，因爲我已經有了。當我點擊外部框時關閉，當另一個菜單鏈接被選中時關閉，即單擊主頁並彈出重置關閉。關閉JQuery圖片點擊外部div

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Website</title> 

<link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" /> 

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> 

<script type="text/javascrip" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script src="js/jquery.localscroll-min.js" type="text/javascript"></script> 
<script src="js/jquery.scrollTo-min.js" type="text/javascript"></script> 


    <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> 

     <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" /> 

     <script type="text/javascript"> 
     $(document).ready(function() { 
      $.localScroll.defaults.axis = 'x'; 
      $.localScroll(); 
     }); 
     </script> 

    <script type="text/javascript"> 
    $(function() { 
     $("#gallery a").lightBox(); 
    }); 
    </script> 

<script type="text/javascript"> 
$(".gallery").click(function(e){ 
    e.stopPropagation(); 
}); 

</script> 

<script type="text/javascript"> 
$(".menu a").click(function(e){ 
    e.stopPropagation(); 
}); 

</script> 

</head> 
<body> 

       <a name="home"></a> 
    <div id="menu"> 
     <ul> 
      <li><a href="#home">Home</a></li> 
      <li><a href="#box1">Box 1</a></li> 
      <li><a href="#box2">Box 2</a></li> 
      <li><a href="#box3">Box 3</a></li> 
      <li><a href="#box4">Box 4</a></li> 
      <li><a href="#box5">Box 5</a></li> 
      <li><a href="#box6">Box 6</a></li> 
      <li><a href="#box7">Box 7</a></li> 
      <li><a href="#box8">Box 8</a></li> 
     </ul> 
    </div> 
<div id="box6" class="box"> 
      <h2><a name="box6">Sixth Box</a></h2> 
      <p><div id="gallery"> 

     <li> 
      <a href="photos/image1.jpg" title="Image 1 $('#gallery').lightBox();"> 
       <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" /> 
      </a> 
     </li> 
     <li> 
      <a href="photos/image2.jpg" title="Image 2 $('#gallery a').lightBox();"> 
       <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" /> 
      </a> 
     </li> 
     <li> 
      <a href="photos/image3.jpg" title="Image 3 $('#gallery a').lightBox();"> 
       <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" /> 
      </a> 
     </li> 
     <li> 
      <a href="photos/image4.jpg" title="Image 4 $('#gallery a').lightBox();"> 
       <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" /> 
      </a> 
     </li> 
     <li> 
      <a href="photos/image5.jpg" title="Image 5 $('#gallery a').lightBox();"> 
       <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" /> 
      </a> 
     </li> 

</div></p> 
     </div>

來源

2012-10-16 Rhys M. Davies

問題可能是調用插件的jquery選擇器似乎是錯誤的。 Ty更改爲$('a#gallery').lightBox();並向您想要公開該行爲的鏈接添加一個id「圖庫」。我檢查了site，似乎你不需要任何其他腳本來通過點擊外部來隱藏圖像。

來源

2012-10-16 04:26:36 nicooga

以及你需要處理文件單擊事件這個

$(document).click(function (e) { 
     //apply your code here to check which element is clicked by using $(e.target) 
});

$(e.target)會給你的對象上點擊事件發生後已被解僱，你可以通過class和id

來源

2012-10-16 04:30:34 rahul

$(document).click(function(e){ 
    var elem = $(e.target).attr('class'); 
    if (elem != 'slidingDiv') { ////slidingDiv is a class name where do not want to close when click on it... 
     ///Your code to close popup..... 
    } 
});

來源

2012-10-16 04:53:01 harsh4u

嘗試檢查爲每個元素創建單獨的ID並在隱藏塊中標記它們，如下所示。

$(document).click(function (e) { 
    if ((e.target.id != "a_IDName") && (e.target.id != "imgIDName"){ 
     // if click is not in 'mydiv' 
     $("#a_IDName").hide("fast"); 
    } 
    //More if's for each Image Condition. 
});

希望這會有所幫助。

來源

2013-07-05 13:48:19 Satish

關閉JQuery圖片點擊外部div

回答

相關問題