14

web开发：关闭浮出层

Posted 一月 21st, 2010. Filed under 互联网视点

在华人街的几个页面中需要出现浮出层的应用，但与模式对话框不同的是，这些浮出层并不需要出现背景遮罩层，这就是的关闭浮出层出现一些问题。如常见的lightbox效果，点击对话框外部的遮罩层区域即可获得非浮出层的外部点击事件，也就可以此来关闭浮出层。但如果没有呢？

以下是2个常见的思路：

1、判断点击的是否是浮出层

捕获鼠标点击事件，判断事件的目标DOM是否是浮出层的内容，以此来判断点击区域是在浮出层内部还是外部；

这种方式比较直接，但遇到的问题是如果浮出层内的结构比较多，会是的判断变得复杂起来，也并不利于浮出层内的内容修改变更，没有重用性。

2、判断点击时鼠标是否在弹出层范围内

当浮出层出现时，创建一个变量来isOut保存当前鼠标是否在浮出层内，然后为浮出层绑定鼠标移入和移出事件，移入时isOut为false，移出是isOut为true，为body绑定鼠标点击事件，如果点击时isOut为false，则不做处理，如果isOut为true，则关闭浮出层即可。

以jquery为例：

<script type="text/javascript">
jQuery(document).ready(function(){
        jQuery("#open_btn").click(function(){
                var isOut = true
                jQuery("#panel").bind("mouseover",function(){isOut = false}).bind("mouseout",function(){isOut = true})
                jQuery("body").bind("mousedown",function(e){
                        if(!isOut)return
                        else{
                                jQuery("#panel").fadeOut();
                                jQuery("body").unbind()
                        }
                })
        })
})
</script>
 
If you have enjoyed this entry. Please feel free to bookmark it using your favorite social bookmarking site

14 Responses so far

  1. joe 说：
    2010-01-22于10:12

    New Year, New Look!

    回复
  2. 念念不忘 说：
    2010-01-22于11:30

    高级应用,呵呵,本人菜鸟,只能来看看热闹,简此而以.

    回复
  3. 念念不忘 说：
    2010-01-23于00:15

    呵呵，博主太客气啦，不用谢。

    回复
  4. robert 说：
    2010-01-23于05:05

    测试一下嵌套回复

    回复
  5. 宠物小精灵游戏 说：
    2010-01-23于05:54

    好热闹

    回复
  6. 开心凡人 说：
    2010-02-08于14:14

    文章不错，呵呵

    回复
  7. 山东LED显示屏 说：
    2010-02-10于11:10

    **已自动过滤广告信息**冒个泡，博主的文章很精彩，值得小弟学习，支持一下。

    回复
  8. 仓栏半挂车 说：
    2010-02-11于09:25

    **系统已自动清除广告内容**给博主拜年来了，祝博主春节快乐，阖家欢乐，身体健康。

    回复
  9. 塑胶灯罩 说：
    2010-02-11于21:33

    博客写的不错啊 继续加油啊 O(∩_∩)O哈哈~回踩啊**系统已自动清除广告内容**

    回复

Leave a Comment