1、首先输入代码:
#pop {
border: #000;
background-color: #CCC;
position: absolute;
left: 50px;
top: 50px;
width: 200px;
2、然后输入代码:
height: 500px;
display: none;
}
#btn {
color: #f00;
}
打开层
3、然后输入:
function $(id) { return document.getElementById(id); }
window.onload = function () {
document.onclick = function (e) {
$("pop").style.display = "none";
}
$("btn").onclick = function (e) {
4、最后输入:
$("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;
}
// 点击任何地方 让left隐藏 bus_select出现
$(document).click(function(){ $('.left').hide(); $('.bus_select').show(); });
// 点击left 阻拦(让left隐藏 bus_select出现)(stopPropagation阻拦click事件冒泡) 及实现了 点击left之外的任何地方 让left隐藏 bus_select出现
$('.left').click(function(event){ event.stopPropagation(); });
// 点击bus_select之后 left出现 bus_select隐藏
$('.bus_select').click(function(event){ $('.bus_select').hide(); $('.left').show(); });
$(".left").toggle();
$("body").click(function(e){
if(!$(e.target).parents(".left").length){
$(".left").hide()
}
});