JavaScript 點選頁面其他地方關閉視窗

admin發表於2019-01-31
JavaScript

彈窗效果中，通常有這樣設定的，點選彈窗本身，除非是關閉按鈕，不會將彈窗關閉。

但是點選網頁的其他部分就能夠將視窗關閉，下面通過程式碼例項介紹一下如何實現此效果。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  font-size:12px;
  font-family:Verdana, Geneva, sans-serif;
  line-height:14px
}
a{color:#039}
a:hover{color:#f60}
.pop{
  position:absolute;
  left:40%;
  top:40%;
  width:300px;
  height:100px;
  background:#eee;
  border:1px solid #ccc
}
.pop_head{
  position:relative;
  height:20px;
  background:#ccc
}
.pop_head a{
  position:absolute;
  right:8px;
  line-height:20px;
  color:#000;
  text-decoration:none
}
.pop_head a:hover{
  color:#f60;
  text-decoration:none
}
.pop_body{padding:8px}
</style>
<script type="text/javascript"> 
function show(ev,id){ 
  var ev=window.event||ev;
  ev.stopPropagation?ev.stopPropagation():ev.cancelBubble=true;
  var obj=document.getElementById(id); 
  obj.style.display=""; 
} 
function hide(evt,id){ 
  var obj=document.getElementById(id); 
  var target=evt.target?evt.target:evt.srcElement;
  if(target.id=="pop"||target.id=="pop_head"||target.id=="pop_body")
  return;
  else
  obj.style.display="none"; 
} 
document.onclick=function(ev){
  var ev=window.event||ev;
  hide(ev,'pop');
}
window.onload=function(){
  var theclose=document.getElementById("closeid");
  var theshow=document.getElementById("showid");
   
  theclose.onclick=function(){
    var ev=window.event||ev;
    hide(ev,'pop')
  }
   
  theshow.onclick=function(ev){
    var ev=window.event||ev;
    show(ev,"pop")
  }
}
</script>
</head>
<body>
<div id="pop" class="pop" style="display:none">
  <div id="pop_head" class="pop_head"><a href="javascript:void(0);" id="closeid">關閉</a></div>
  <div id="pop_body" class="pop_body">螞蟻部落歡迎您</div>
</div>
<a href="javascript:void(0);" id="showid">彈出按鈕</a> 
</body>
</html>

只有點選彈出的關閉按鈕和彈窗以外的區域可以關閉彈窗，下面介紹一下實現過程。

一.程式碼註釋:

（1）.function show(ev,id){}，使隱藏視窗顯示，第一個引數是事件物件，第二個是id屬性值。

（2）.var ev=window.event||ev,實現事件物件的瀏覽器相容性。

（3）.ev.stopPropagation?ev.stopPropagation():ev.cancelBubble=true，阻止事件冒泡，否則無法顯示彈窗，因為在document物件上註冊了onclick事件，此事件處理函式能夠關閉彈窗。

（4）.var obj=document.getElementById(id)，獲取指定id的物件。

（5）.obj.style.display=""，顯示彈窗。

（6）.function hide(evt,id){}，此函式用來隱藏彈窗，第一個引數是事件物件，第二個是id屬性值。

（7）.var obj=document.getElementById(id)，獲取指定id屬性值的物件。

（8）.var target=evt.target?evt.target:evt.srcElement，獲取事件源物件。

（9）.if(target.id=="pop"||target.id=="pop_head"||target.id=="pop_body") return; else obj.style.display="none"; ，如果點選的是彈窗的關閉按鈕和彈窗之外的區域就隱藏彈窗。

（10）.document.onclick=function(ev)，為document物件註冊onclick事件處理函式。

（11）.hide(ev,'pop')，隱藏彈窗的函式，第一個引數是事件物件，第二個是id屬性值。

二.相關閱讀:

（1）.var ev=window.event||ev參閱var ev=window.event||ev一章節。 

（2）.stopPropagation()參閱JavaScript stopPropagation()一章節。

（3）.target參閱JavaScript event.target一章節。 

相關文章