jquery如何实现点击空白处隐藏元素
我们在网站开发的时候经常会有点击空白处去隐藏已有的元素，DIV或者其他，本次教给大家如何用jquery实现这个特效的方法。
一款jQuery点击空白处隐藏弹出层网页特效，点击按钮弹出层、点击页面空白处弹出层消失JS代码。主要功能是点击按钮弹出层显示,然后通过点击页面任意位置都能关闭弹出层显示效果,主要是$(document).click的操作应用。演示 Demo,效果源码：
CSS代码:
* {
padding: 0;
margin: 0;
}
#btnShow{
margin: 100px auto 0;
width: 90px;
display: block;
}
#divTop{
border: 2px solid #666666;
position: absolute; display: none;
width: 400px;
height: 200px;
color: #333;
background: #efefef;
padding-top: 10px;
text-align: center;
font: 16px/30px "微软雅黑";
margin-top: -105px;
margin-left: -200px;
left: 50%;
top: 50%;
}
JS代码：
$(function () {
$('#btnShow').click(function (event) {
//取消事件冒泡
event.stopPropagation();
//按钮的toggle,如果div是可见的,点击按钮切换为隐藏的;如果是隐藏的,切换为可见的。
$('#divTop').toggle('slow');
return false;
});
//点击空白处隐藏弹出层，下面为滑动消失效果和淡出消失效果。
$(document).click(function(event){
var _con = $('#divTop'); // 设置目标区域
if(!_con.is(event.target) && _con.has(event.target).length === 0){ // Mark 1
//$('#divTop').slideUp('slow'); //滑动消失
$('#divTop').hide(1000); //淡出消失
}
});
})
HTML代码：
<body> <input type="button" id="btnShow" value="弹出框按钮" /> <div id="divTop"> 点击空白区域弹出层关闭！ </div> </body>
经过测试，在移动端Iphone手机上点击页面空白处弹出层关闭失效，不支持document写法，解决方案：可以添加一个背景层作为页面空白对象处理。
点击空白处隐藏弹出层案例二：
<!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>点击空白处关闭弹出层</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#box{width:300px;height:200px;border:1px solid #000;display:none;}
.btn{color:red;}
</style>
<script type="text/javascript" src="http://www.internetke.com/public/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".btn").click(function(event){
var e=window.event || event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
$("#box").show();
});
$("#box").click(function(event){
var e=window.event || event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
});
document.onclick = function(){
$("#box").hide();
};
})
</script>
</head>
<body>
<div id="box"></div>
<span class="btn">点击此处打开弹出层</span><br>点击空白处关闭弹出层
</body>
</html>
在给大家分享一下js实现的点击div区域外隐藏div区域的方法代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js" ></script>
<title></title>
</head>
<style type="text/css">
body
{
background-color:#999999;
}
#myDiv
{
background-color:#FFFFFF;
width:250px;
height:250px;
display:none;
}
</style>
<body>
<input id="btn" type="button" value="显示DIV" />
<div id="myDiv">
This is a div;
</div>
</body>
<script type="text/javascript">
var myDiv = $("#myDiv");
$(function ()
{
$("#btn").click(function (event)
{
showDiv();//调用显示DIV方法
$(document).one("click", function ()
{//对document绑定一个影藏Div方法
$(myDiv).hide();
});
event.stopPropagation();//阻止事件向上冒泡
});
$(myDiv).click(function (event)
{
event.stopPropagation();//阻止事件向上冒泡
});
});
function showDiv()
{
$(myDiv).fadeIn();
}
</script>
您可能感兴趣的文章:
- jQuery除指定区域外点击任何地方隐藏DIV功能
- jQuery实现切换隐藏与显示同时切换图标功能
- jQuery输入框密码的显示隐藏【代码分享】
- jQuery控制元素隐藏和显示
- jQuery实现获取隐藏div高度的方法示例
- jQuery通过改变input的type属性实现密码显示隐藏切换功能
- jquery uploadify隐藏上传进度的实现方法
相关推荐
-
jQuery控制元素隐藏和显示
1.jQuery隐藏和显示效果 通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: $("#hide").click(function(){ $("p").hide(); }); //点击id="hide"元素时,隐藏所有<p>标签内容: $("#show").click(function(){ $("p").show(); }); //点击id=
-
jQuery实现获取隐藏div高度的方法示例
本文实例讲述了jQuery实现获取隐藏div高度的方法.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>测试获取隐藏div高度</title> <meta name="description" content="jquery获取隐
-
jQuery实现切换隐藏与显示同时切换图标功能
HTML代码: <!doctype html> <html> <head> <meta charset=" utf-8"> <title>jq隐藏显示图标切换</title> <!--引入jq文件--> <script type="text/javascript" scr="./js/jquery.min.js"></script> <
-
jQuery除指定区域外点击任何地方隐藏DIV功能
具体代码如下所示: $('body').click(function(e) { var target = $(e.target); // 如果#overlay或者#btn下面还有子元素,可使用 // !target.is('#btn *') && !target.is('#overlay *') if(!target.is('#btn') && !target.is('#overlay')) { if ( $('#overlay').is(':visible') ) { $
-
jQuery通过改变input的type属性实现密码显示隐藏切换功能
一般我们做登录注册的时候都会提供一个让用户选择自己输入的密码是否显示的需求, 这种需求我们肯定会想到只要动态改变input的type属性不就好了(text显示/password隐藏): 于是我用了$(''#id).attr('type', 'password')这个API 然而结果并不是我想的那样,出错了 HTML 代码 Uncaught Error: type property can't be changed 意思大概就是这个属性不能被修改. 于是我就googl一手. 然而我得到的结果是这样
-
jQuery输入框密码的显示隐藏【代码分享】
效果图: 代码如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <title>jQuery输入框密码显示隐藏代码</title> <!--手机端需要添加--> <meta name="viewport" content="width=device-widt
-
jquery uploadify隐藏上传进度的实现方法
在配置中添加如下参数即可 'onInit': function () { $("#upload_excel-queue").hide(); }, 以上这篇jquery uploadify隐藏上传进度的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
jquery如何实现点击空白处隐藏元素
我们在网站开发的时候经常会有点击空白处去隐藏已有的元素,DIV或者其他,本次教给大家如何用jquery实现这个特效的方法. 一款jQuery点击空白处隐藏弹出层网页特效,点击按钮弹出层.点击页面空白处弹出层消失JS代码.主要功能是点击按钮弹出层显示,然后通过点击页面任意位置都能关闭弹出层显示效果,主要是$(document).click的操作应用.演示 Demo,效果源码: CSS代码: * { padding: 0; margin: 0; } #btnShow{ margin: 100px a
-
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩）
在项目中往往会有这样的需求: 弹出框(或Popover)在 show 后,点击空白处可以将其 hide. 针对此需求,整理了三种实现方式,大家按实际情况选择. 当然,我们做项目肯定会用到 UI 框架,常见的 Element 中的组件提供了这样的方法. 但是,就算使用框架,有些时候还是要用到的,比如: Element 中的 Popover,当我们想使用手动方式(trigger 触发方式为 manual时)控制它的 show & hide 的时候,就要自己实现这个功能啦. 第一种方式:最普通的手动监
-
详解IOS点击空白处隐藏键盘的几种方法介绍
IOS7 点击空白处隐藏键盘的几种方法,具体如下: iOS开发中经常要用到输入框,默认情况下点击输入框就会弹出键盘,但是必须要实现输入框return的委托方法才能取消键盘的显示,对于用户体验来说很不友好,我们可以实现点击键盘以外的空白区域来将键盘隐藏,以下我总结出了几种隐藏键盘的方法: 首先说明两种可以让键盘隐藏的Method: 1.[view endEditing:YES] 这个方法可以让整个view取消第一响应者,从而让所有控件的键盘隐藏. 2.[textFiled resignFirst
-
jQuery获取当前点击的对象元素(实现代码)
jQuery获取当前点击的对象元素(实现代码) <script type="text/javascript" src="script/jquery-1.8.3.js"></script> </head> <body> <p>段落1</p> <p>段落2</p> <p>段落3</p> <p>段落4</p> <p>段
-
Android 中自定义Dialog样式的Activity点击空白处隐藏软键盘功能(dialog不消失)
一.需求触发场景: 项目中需要开发带有EditText的Dialog显示,要求在编辑完EditText时,点击Dilog的空白处隐藏软键盘.但是Dialog不会消失.示例如下: 二.实现方法: 发布需求时,我个人曾想过直接通过new的方式直接创建Dialog,经过多次尝试,无法实现要求,所以采用将Activity设置为Dialog样式进行展示,调用方法实现需求.具体实现如下: 本次演示示例的工程结构: 2.1AndroidMainfest.xml配置文件 需要在配置文件中将需要显示为dialog
-
jQuery实现的点击显示隐藏下拉菜单功能完整示例
本文实例讲述了jQuery实现的点击显示隐藏下拉菜单功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>toggle</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.j
-
Flutter 全局点击空白处隐藏键盘实战
老孟导读:为什么要实现点击空白处隐藏键盘?因为这是 iOS 平台的默认行为,Android 平台由于其弹出的键盘右上角默认带有关闭键盘的按钮,所以点击空白处不会隐藏键盘. 对于单个页面来说,通过为 TextField 添加 focusNode,点击空白处时使 TextField 失去焦点,实现如下: class DismissKeyboardDemo extends StatelessWidget { final FocusNode focusNode = FocusNode(); @overr
-
详解vue中点击空白处隐藏div的实现（用指令实现）
简单想应该怎么实现? 1.肯定是给document增加一个click事件监听 2.当发生click事件的时候判断是否点击的当前对象 结合着本思路和指令咱们来实现. 简单介绍vue指令 一个指令定义对象可以提供如下几个钩子函数 (均为可选): bind:只调用一次,指令第一次绑定到元素时调用.在这里可以进行一次性的初始化设置. inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中). update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNod
-
vue通过指令(directives)实现点击空白处收起下拉框
日常开发中有时会有这样的需求,就是展开下拉框的时候,通过点击空白处,可以实现让下拉框收回.这里我们通过vue2.0中的自定义指令来简单实现. 貌似截图尺寸有点大(╯﹏╰) vue自定义指令 解释(参考官方文档) 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令. 举例: 我们要让这样一个输入框在页面加载的
-
点击显示指定元素隐藏其他同辈元素的方法
复制代码 代码如下: <!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=&qu