点击弹出层外区域关闭弹出层jquery特效示例_jquery

点击弹出层外区域关闭弹出层jquery特效,废话不说,上代码,简洁明了:

复制代码 代码如下:

<html>
<head>
<style>
.hide{display:none;}
.con{width:500px;height:300px;background:#000;}
</style>
<title>点击弹出层 ,点击弹出层外区域关闭弹出层jquery特效</title>
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div.down").click(function(e) {
e.stopPropagation();
$("div.con").removeClass("hide");
});
$("div.con a").click(function() {
$("div.con").addClass("hide");
});

$(document).click(function() {
if (!$("div.con").hasClass("hide")) {
$("div.con").addClass("hide");
}
});

$("div.con").click(function (e) {
e.stopPropagation();//阻止事件向上冒泡
});

});
</script>
</head>
<body>
<div class="down">click</div>
<div class="con hide">show-area
<a style="color:#fff;">关闭</a>

</div>
</body>
</html>

时间: 2024-08-31 01:59:00

点击弹出层外区域关闭弹出层jquery特效示例_jquery的相关文章

ie9下关闭弹出窗口出现__flash__removeCallback未定义错误_Flex

使用swfupload作为上传组件,artdialog作为弹出窗口,在关闭弹出窗口时,出现"__flash__removeCallback"未定义错误.而且是关了又出现.网上有些解决方案,主要就是说覆写"__flash__removeCallback"函数的定义,这个在swfupload组件中已经有了: // Fix Flashes own cleanup code so if the SWFMovie was removed from the page // it

jQuery实现点击任意位置弹出层外关闭弹出层效果_jquery

在之前做项目的时候经常会在主页面上点击某个按钮,右侧弹出一个div输出对应内容的详细信息.此时,我是希望在鼠标点击弹出层外的时候关闭该弹出层,主要思想就是: 找到鼠标点击的那个元素 判断这个元素是否在指定区域内,其实就是判断它的父元素是不是弹出层 如果不是就对弹出层进行hide,如果是就不进行任何操作 具体实现 该代码需要使用jQuery,代码如下: $(document).mousedown(function(e){ if($(e.target).parent("#info").le

Framework7 设置是否允许点击弹出框外部区域,关闭弹出层

1,Framework7中三大类弹出框   (1)模态框(modal):默认点击外部区域不会关闭弹出框 模态框包括:告警框(Alert).确认框(Confirm).需要用户输入的提示框(Prompt)   (2)操作表(Action Sheet):默认点击外部区会自动关闭   (3)弹出层(Popup):默认点击外部区域会自动关闭   2,修改默认的关闭方式 如果想要点击模态框(modal)外部区域也会关闭模态框.或者不允许点击操作表(Action Sheet).弹出层(Popup)外部区域时会

jQuery点击自身以外地方关闭弹出层的简单实例

 本篇文章主要是对jQuery点击自身以外地方关闭弹出层的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 主要功能是点击显示,然后通过点击页面的任意位置都能关闭显示效果,主要是$(document).click的作用   开发过程中经常有一些弹出层,弹出后要在点击页面其他地方时自动关闭,下面是实现代码:   HTML代码:   代码如下: <div class="down">click</div> <div class="con

js 点击页面其他地方关闭弹出层(示例代码)_javascript技巧

复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> <!-- *{font-size:12px;font-family:Verdana, Gen

遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)_jquery

首先给大家展示演示效果: 基于JavaScript的网页弹出层,鼠标按在弹出层的标题栏处,可以拖动该浮动层随意移动位置,不需要时也可以关闭,操作体验舒服,兼容性好,IE/火狐等众多浏览器下运行稳定.反应快速.代码表现方面,简洁务实,不玩虚的,拿去学习也相当不错. js代码 示例一: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>弹出层并可

jquery 点击空白处关闭弹出层几个实例

例1  代码如下 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>点击空白处关闭

js 点击页面其他地方关闭弹出层

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

jQuery实现指定区域外单击关闭指定层的方法【经典】_jquery

本文实例讲述了jQuery实现指定区域外单击关闭指定层的方法.分享给大家供大家参考,具体如下: 在页面上指定区域外单击,关闭层.常见效果为弹出层外单击,关闭弹出层.今天遇到一个这样的效果,用jQuery实现起来挺简单的,顺便复习了一下相关知识. $(document).mouseup(function(e){ if($(e.target).parent("#big_map").length==0){ $("#big_map").hide("fast&quo