关闭

点击页面空白处时隐藏弹出的div层

2836人阅读 评论(0) 收藏 举报
分类:

由于工作需要,最近玩了下js,需求是做一个弹出层(需求上只有个原型图,什么说明都没有我也是醉了),然后就开始想需要实现的效果,那么点击空白处需要隐藏肯定是不可少的。下边是这个div弹出层:

<div class="sku-batchlayer hint-layer hint-overlay hint-ext-position" id="group_operation">
<span style="white-space:pre">	</span>。。。、//具体代码
</div>
然后西边这个是页面需要点击的标签,点击之后就会弹出这个弹出层,css样式这里我就不引入了(因为不会。。。找大神帮我写的css)

<i class="sku-batch sku-batch-enable" onclick="cshop_product.show_group_operation(this)">

之后是需要写的逻辑,也就是js了,我们是使用的jquery:

show_group_operation : function(){
	event.stopPropagation();//阻止事件冒泡
	$('#group_operation').toggle();
},
//改变窗口大小时,弹出的批量设置隐藏
$(window).resize(function(){
	document.getElementById("group_operation").style.display="none";
});

//点击弹出的批量设置以外的地方时隐藏弹出层
$(document).click(function(event){
	$('#group_operation').css('display','none');
});

//点击弹出层时组织事件冒泡
$('#group_operation').click(function(){
	event.stopPropagation();
});
$(document).ready(function(){
	document.getElementById("group_operation").style.display="none";
});
说明一下,首先是页面加载时会调用ready方法,然后让弹出层先隐藏,之后点击<i>标签时会调用show_group_operation方法,里边的.toggle()会根据div的显示情况做出相反的作用。然后当点击页面的其他位置时会调用$(document).click(),使div隐藏。但是我们会发现当我们点击div内部的对象时也会使div隐藏,哲斌故事我们想要的。

那么醉关键的来了,怎么才能使点击div里边的元素时不让div隐藏呢,这关系到事件冒泡,关于事件冒泡情看我上一篇转载的文章

这里我们就需要使用event这个事件对象(上一篇有详细说明)。当点击到div的内部时,调用$('#group_operation').click()方法,之后event.stopPropagation()来阻止事件冒泡就可以了,当然在第二次点击<i>标签想要隐藏这个div时也是一样的道理。

刚工作不久,如果哪些地方说的不对,请各位高手指正




0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

点击页面空白处时隐藏弹出的div层

由于工作需要,最近玩了下js,需求是做一个弹出层(需求上只有个原型图,什么说明都没有我也是醉了),然后就开始想需要实现的效果,那么点击空白处需要隐藏肯定是不可少的。下边是这个div弹出层: ...
  • liquantong
  • liquantong
  • 2015-11-27 10:04
  • 2836

jQuery点击空白处隐藏弹出层

一款jQuery点击空白处隐藏弹出层网页特效,点击按钮弹出层、点击页面空白处弹出层消失JS代码。主要功能是点击按钮弹出层显示,然后通过点击页面任意位置都能关闭弹出层显示效果,主要是$(document...
  • Sky786905664
  • Sky786905664
  • 2016-11-23 19:36
  • 5826

使用jquery实现点击按钮弹出层和点击空白处隐藏层

使用jquery弹出层和点击空白处隐藏层 $(function () { $('#btnShow').click(f...
  • bianjing40
  • bianjing40
  • 2015-10-25 01:15
  • 2803

js html页面点击小图弹出div放大查看原图

  • 2008-11-29 20:06
  • 161KB
  • 下载

点击空白处隐藏div方法

一般写法:html点我显示div 我是点击btn后显示的divjQuery// 取消冒泡方法(兼容写法) function cancel_Bubble() { //如果事件对象存在 ...
  • anLazyAnt
  • anLazyAnt
  • 2016-05-16 00:50
  • 654

基于jQuery实现的点击编辑按钮时传递参数到弹出层div

如图是演示效果 \ 1、新建一个HTML页面,实例化一个表格                   新增账号
  • qq_29777207
  • qq_29777207
  • 2017-04-22 17:36
  • 768

点击弹出div圆角的遮罩层,可关闭

  • 2013-11-12 11:03
  • 2KB
  • 下载

点击文字弹出一个DIV层窗口代码

  • 2014-07-15 10:45
  • 2KB
  • 下载

地图点击弹出div层

  • 2015-09-10 16:41
  • 715KB
  • 下载

jquery 点击弹出div(模态层)3种效果平滑出现

  • 2016-01-18 10:50
  • 34KB
  • 下载
    个人资料
    • 访问:34805次
    • 积分:466
    • 等级:
    • 排名:千里之外
    • 原创:12篇
    • 转载:10篇
    • 译文:0篇
    • 评论:3条
    文章分类