点击弹出层外区域关闭弹出层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>
相关推荐
-
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
-
jquery原创弹出层折叠效果点击折叠弹出一个层
弹出层效果很多网站上都用到,今天就整理最近项目里用到的一个小效果,点击折叠弹出一个层给用户填写信息.弹出层代码都是jq动态创建,每个人写法都不一样,需求也不一样,所有选择符合自已的即可. html: 复制代码 代码如下: <h1 class="bm"><a href="javascript:;">我要报名</a></h1> 复制代码 代码如下: *{ margin:0; padding:0;} body{ font:1
-
点击弹出层效果&弹出窗口后网页背景变暗效果的实现代码
复制代码 代码如下: <html><head><title>网页特效-窗口特效-弹出窗口后网页背景变暗的效果</title><meta http-equiv="content-Type" content="text/html;charset=gb2312"><!--把下面代码加到<head>与</head>之间--><style type="text/cs
-
jquery实现点击弹出层效果的简单实例
弹出层在实际应用中我们经常会碰到大量的弹出层效果,下面我来做一个基于jquery的简单的弹出层效果实例,各位朋友有兴趣可参考. 效果代码如下: 在 弹出层 中下面是核心代码 复制代码 代码如下: <script type="text/javascript">// 渐变弹出层$(document).ready(function(){ var speed = 600;//动画速度 $("#race a").click(function(event){//绑定
-
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实现点击弹出带标题栏的弹出层(从右上角飞入)效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的弹出层,点击文字后从网页右上角飞入,也可以说是滑入,此类弹出框带有关闭按钮,可自定义标题栏和弹出框内容,风格自己可定义,代码简洁,基于jquery实现,学习参考价值大,也可拿出即用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-fade-in-title-info-stye-alert-code
-
基于jQuery实现点击弹出层实例代码
jquery实现点击链接弹出层效果:本例实现的主要原理:jquery操作DOM元素.对层样式的设置.将display:设置为none;让层隐藏: 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net" /> <tit
-
js点击任意区域弹出层消失实现代码
本文实例为大家分享了js点击任意区域弹出层消失的具体代码,供大家参考,具体内容如下 采用jquery element.parents();判断点击区域是否在弹出层上面或者在按钮上面,否则让弹出层消失. 完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head
-
jQuery点击自身以外地方关闭弹出层的简单实例
主要功能是点击显示,然后通过点击页面的任意位置都能关闭显示效果,主要是$(document).click的作用 开发过程中经常有一些弹出层,弹出后要在点击页面其他地方时自动关闭,下面是实现代码: HTML代码: 复制代码 代码如下: <div class="down">click</div><div class="con hide">show-area</div> CSS代码:.hide{display:none;}
-
JavaScript 点击页面上的按纽,弹出层,背景变灰
点击页面上的按纽,弹出一个层,背景变灰 点击页面上的按纽,弹出一个层,背景变灰 function sAlert(str) { var msgw,msgh,bordercolor; msgw=400;//提示窗口的宽度 msgh=100;//提示窗口的高度 titleheight=25 //提示窗口标题高度 bordercolor= "#336699 ";//提示窗口的边框颜色 titlecolor= "#99CCFF ";//提示窗口的标题颜色 var sWidth
随机推荐
- Oracle数据库系统使用经验六则
- IIS7 配置大全(ASP.NET 2.0, WCF, ASP.NET MVC,php)
- JS实现IE状态栏文字缩放效果代码
- Elasticsearch.Net使用教程 MVC4图书管理系统(2)
- ASP.NET配置KindEditor文本编辑器图文教程
- Python的GUI框架PySide的安装配置教程
- 微信小程序 loading(加载中提示框)实例
- Android系统自带样式 (android:theme)
- javascript 数组排序函数
- jQuery grep()方法详解及实例代码
- Linux 管理员手册(2)
- linux中如何添加用户并赋予root权限详解
- 基于jquery中children()与find()的区别介绍
- JS模仿MSN右下角弹出提示框代码
- Android实现QQ新用户注册界面遇到问题及解决方法
- 解析Java的Spring框架的BeanPostProcessor发布处理器
- 美化Google Adsense广告的方法
- Winform圆形环绕的Loading动画实现代码
- c实现linux下的数据库备份
- php 遍历目录,生成目录下每个文件的md5值并写入到结果文件中