溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關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實現點擊空白處隱藏元素的方法”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
