关闭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

回答

相关问题