整個複製可看效果
1. JS效果
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
#pop {
border: #000;
background-color: #CCC;
position: absolute;
left: 50px;
top: 50px;
width: 200px;
height: 500px;
display: none;
}
#btn {
color: #f00;
}
</style>
</head>
<body>
<span id="btn">打開層</span>
<div>aaaaaaaaaaaa</div>
<div>aaaaaaaaaaaa</div>
<div id="pop">
浮層，點擊這個浮層以外的區域，都可以隱藏這個浮層
<p><a href="javascript:;">最主要的是點這個div裏面的鏈接，div照樣不隱藏</a></p>
</div>
</body>
</html>
<script type="text/javascript">
function $(id) { return document.getElementById(id); }
window.onload = function () {
document.onclick = function (e) {
$("pop").style.display = "none";
}
$("btn").onclick = function (e) {
$("pop").style.display = "block";
e = e || event; stopFunc(e);
}
$("pop").onclick = function (e) {
e = e || event; stopFunc(e);
}
}
function stopFunc(e) {
e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
}
</script>2. JQ效果
$("#btn").on("click", function(e){
$("#menu").show();
$(document).one("click", function(){
$("#menu").hide();
});
e.stopPropagation();
});
$("#menu").on("click", function(e){
e.stopPropagation();
});