js 點(diǎn)擊頁(yè)面其他地方關(guān)閉彈出層(示例代碼)
更新時(shí)間：2013年12月24日 08:50:55 作者：
本篇文章主要介紹了js點(diǎn)擊頁(yè)面其他地方關(guān)閉彈出層的示例代碼。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
復(fù)制代碼 代碼如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</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>
</head>
<body>
<!--首先設(shè)置一個(gè)層:-->
<div id="pop" class="pop" style="display:none" onclick="show(event,'pop');">
<div class="pop_head"><a href="javascript:void(0);" onclick="hide('pop')">關(guān)閉</a></div>
<div class="pop_body">謝謝光臨……</div>
</div>
<!--彈出層的按鈕:-->
<a href="javascript:void(0);" onclick="show(event,'pop');">彈出按鈕</a>
<script type="text/javascript">
var url = '#';
function show(evt,o){
evt.stopPropagation?evt.stopPropagation():evt.cancelBubble=true;
var o = document.getElementById(o);
o.style.display = "";
}
function hide(o){
var o = document.getElementById(o);
o.style.display = "none";
window.location = url;
}
document.onclick=function(){hide('pop');}
</script>
</body>
</html>
總結(jié)：
1.在調(diào)用彈出方法的時(shí)候要傳入一個(gè)事件對(duì)象：event。
2.彈出方法要加入事件綁定代碼。
3.要有個(gè)全局的js代碼，用來(lái)執(zhí)行點(diǎn)擊其他部位的時(shí)候調(diào)用隱藏彈出層的方法。
您可能感興趣的文章:
- js實(shí)現(xiàn)div彈出層的方法
- 使用js實(shí)現(xiàn)關(guān)閉js彈出層的窗口
- js與css實(shí)現(xiàn)彈出層覆蓋整個(gè)頁(yè)面的方法
- js寫一個(gè)彈出層并鎖屏效果實(shí)現(xiàn)代碼
- js+css 實(shí)現(xiàn)遮罩居中彈出層(隨瀏覽器窗口滾動(dòng)條滾動(dòng))
- js彈出層之1：JQuery.Boxy (二)
- Js Jquery創(chuàng)建一個(gè)彈出層可加載一個(gè)頁(yè)面
- jquery.artwl.thickbox.js 一個(gè)非常簡(jiǎn)單好用的jQuery彈出層插件
- Js制作簡(jiǎn)單彈出層DIV在頁(yè)面居中 中間顯示遮罩的具體方法
- javascript實(shí)現(xiàn)彈出層效果
相關(guān)文章
簡(jiǎn)單實(shí)現(xiàn)IONIC購(gòu)物車功能
這篇文章主要為大家詳細(xì)介紹了IONIC簡(jiǎn)易購(gòu)物車的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
基于substring()和substr()的使用以及區(qū)別(實(shí)例講解)
下面小編就為大家分享一篇基于substring()和substr()的使用以及區(qū)別實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
判斷div滑動(dòng)到底部的scroll實(shí)例代碼
下面小編就就為大家分享一篇判斷div滑動(dòng)到底部的scroll實(shí)例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
JavaScript 阻止超鏈接跳轉(zhuǎn)的操作方法(多種寫法)
很多朋友問(wèn)小編能否通過(guò)JavaScript來(lái)阻止超鏈接的跳轉(zhuǎn)呢，今天給大家通過(guò)多種寫法來(lái)實(shí)現(xiàn)這一功能，具體實(shí)例代碼跟隨小編一起看看吧2021-06-06
Bootstrap是Twitter 于2010年開發(fā)出來(lái)的前端框架，用過(guò)的同學(xué)應(yīng)該知道，這款前端框架不僅界面很美觀，而且兼容了很多的瀏覽器，大大加速了我們開發(fā)網(wǎng)站的速度，本文給大家介紹基于Bootstrap扁平化的后臺(tái)框架Ace，需要的朋友參考下2015-11-11
JS前端接口防止重復(fù)請(qǐng)求的三種實(shí)現(xiàn)方案
前段時(shí)間心血來(lái)潮,想把項(xiàng)目的前端都做一下接口防止重復(fù)請(qǐng)求的處理,雖然大部分的接口處理我們都是加了loading的,但又不能確保真的是每個(gè)接口都加了的,下面就來(lái)總結(jié)一下這次的防重復(fù)請(qǐng)求的實(shí)現(xiàn)方案,需要的朋友可以參考下2024-03-03
提示不難做，那個(gè)三角號(hào)樣式很難調(diào)兼容，死了好多腦細(xì)胞預(yù)覽主窗口提示錯(cuò)位，保存本地測(cè)比較好。2011-04-04
針對(duì)BootStrap中tabs控件的美化和完善(推薦)
這篇文章主要介紹了針對(duì)BootStrap中tabs控件的美化和完善的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-07-07
javascript css紅色經(jīng)典選項(xiàng)卡效果實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了javascript css紅色經(jīng)典選項(xiàng)卡效果的實(shí)現(xiàn)代碼,需要的朋友可以參考下2016-05-05
這篇文章主要介紹了在JSP中如何實(shí)現(xiàn)MD5加密的方法,較為詳細(xì)的分析了JSP采用MD5加密的功能、特點(diǎn)及實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下.2016-11-11