点击弹出层外区域关闭弹出层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>
相关推荐
-
JavaScript 点击页面上的按纽,弹出层,背景变灰
点击页面上的按纽,弹出一个层,背景变灰 点击页面上的按纽,弹出一个层,背景变灰 function sAlert(str) { var msgw,msgh,bordercolor; msgw=400;//提示窗口的宽度 msgh=100;//提示窗口的高度 titleheight=25 //提示窗口标题高度 bordercolor= "#336699 ";//提示窗口的边框颜色 titlecolor= "#99CCFF ";//提示窗口的标题颜色 var sWidth
-
js 点击页面其他地方关闭弹出层(示例代码)
复制代码 代码如下: <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
-
点击弹出层效果&弹出窗口后网页背景变暗效果的实现代码
复制代码 代码如下: <html><head><title>网页特效-窗口特效-弹出窗口后网页背景变暗的效果</title><meta http-equiv="content-Type" content="text/html;charset=gb2312"><!--把下面代码加到<head>与</head>之间--><style type="text/cs
-
js点击任意区域弹出层消失实现代码
本文实例为大家分享了js点击任意区域弹出层消失的具体代码,供大家参考,具体内容如下 采用jquery element.parents();判断点击区域是否在弹出层上面或者在按钮上面,否则让弹出层消失. 完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head
-
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
实例如下所示: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击</title> <script src="JS/jquery-1.9.1.js" type="text/javascript"></
-
jquery实现点击弹出层效果的简单实例
弹出层在实际应用中我们经常会碰到大量的弹出层效果,下面我来做一个基于jquery的简单的弹出层效果实例,各位朋友有兴趣可参考. 效果代码如下: 在 弹出层 中下面是核心代码 复制代码 代码如下: <script type="text/javascript">// 渐变弹出层$(document).ready(function(){ var speed = 600;//动画速度 $("#race a").click(function(event){//绑定
-
jQuery点击自身以外地方关闭弹出层的简单实例
主要功能是点击显示,然后通过点击页面的任意位置都能关闭显示效果,主要是$(document).click的作用 开发过程中经常有一些弹出层,弹出后要在点击页面其他地方时自动关闭,下面是实现代码: HTML代码: 复制代码 代码如下: <div class="down">click</div><div class="con hide">show-area</div> CSS代码:.hide{display:none;}
-
jquery原创弹出层折叠效果点击折叠弹出一个层
弹出层效果很多网站上都用到,今天就整理最近项目里用到的一个小效果,点击折叠弹出一个层给用户填写信息.弹出层代码都是jq动态创建,每个人写法都不一样,需求也不一样,所有选择符合自已的即可. html: 复制代码 代码如下: <h1 class="bm"><a href="javascript:;">我要报名</a></h1> 复制代码 代码如下: *{ margin:0; padding:0;} body{ font:1
-
基于jQuery实现点击弹出层实例代码
jquery实现点击链接弹出层效果:本例实现的主要原理:jquery操作DOM元素.对层样式的设置.将display:设置为none;让层隐藏: 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net" /> <tit
-
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
本文实例讲述了jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的弹出层,点击文字后从网页右上角飞入,也可以说是滑入,此类弹出框带有关闭按钮,可自定义标题栏和弹出框内容,风格自己可定义,代码简洁,基于jquery实现,学习参考价值大,也可拿出即用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-fade-in-title-info-stye-alert-code
随机推荐
- 浅谈ASP.NET Core 中间件详解及项目实战
- C#构建树形结构数据(全部构建,查找构建)
- Go语言获取本机逻辑CPU数量的方法
- Exjs 入门篇
- Linux下Tomcat8.0.44配置使用Apr的方法
- 获取同一网段下所有机器MAC地址的shell脚本
- PHP怎么实现网站保存快捷方式方便用户随时浏览
- php下使用以下代码连接并测试
- Git 创建分支提交远程分支详解
- 用asp脚本实现限制IP访问
- 详解MySQL数据库设置主从同步的方法
- bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
- C#中分部类和分部方法的应用
- Android开发之sqlite3命令行简单使用方法
- jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
- Jquery中attr与prop的区别详解
- 试用google search的Ajax api
- php下尝试使用GraphicsMagick的缩略图功能
- 浅谈Android开发系列网络篇之Retrofit
- Python深度优先算法生成迷宫