<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style type="text/css">
*{margin:0;padding:0;}
.warp{overflow:hidden;}
.div1,.div2,.div3,.div4{width:400px;height:100px;margin:20px;background:#000;color:#fff;}
.div2,.div4{display:none;}
.fiex{display:none;}
.div3,.div4{background:red;float:left;margin-top:5px;margin-left:10px;overflow:hidden;}
.div6,.div6 div{padding:10px;border:1px solid #000;}
.div7{width:300px;height:50px;background:blueviolet;display:none;}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<div class="warp">
<div class="div1">div1</div>
<div class="div2">div1显示的内容-点我消失</div>
</div>
<div class="warp">
<div class="div3">div2</div>
<div class="div4">div2显示内容显示内容显示内容-点我消失</div>
</div>
<br /><br />
<div class="div6">
div6内容内容
<div class="uf">
.uf 内容 可点击显示 .div7
</div>
</div>
<div class="div7">
换个布局展示 点击我时 不消失
</div>
<style type="text/css">
#mb{position:fixed;background:rgba(0,0,0,.4);width:100%;height:100%;top:0;left:0;display:none;}
.showbox{position:fixed;top:50%;left:50%;width:400px;height:200px;margin-top:-100px;margin-left:-200px;z-index:100;background:#fff;display:none;}
.close{position:fixed;top:0;right:0;z-index:201;background:red;}
</style>
<input type="button" class="btn2" name="" id="" value="btn2" />
<div id="mb"></div>
<div class="showbox">
<div class="close">closeBtn</div>
</div>
<script type="text/javascript">
$(function(){
$.fn.extend({
toggleWin : function(winBox,boolean){
//this 点击显示winBox 点击除了this的 其他地方则隐藏winBox
//boolean赋值 且 == true 点击除了this和winBox 的 其他地方则隐藏winBox
$(this).click(function(ev){
$(winBox).show();
ev.stopPropagation();
});
$(document).click(function(e){
$(winBox).hide();
});
if(boolean && boolean==true){
$(winBox).click(function(ev){
ev.stopPropagation();
});
}
},
toggSpecify : function(winBox,closeBar){
//this 被点击显示winBox
//closeBar被点击则关闭 winBox,默认 closeBar=#mb
var winBoxBg = ‘<div id=\"mb\"></div>‘
$(this).click(function(){
if(!$("#mb")){
$("body").append(winBoxBg);
}
$("#mb,"+winBox).show();
});
closeBar ? closeBar : closeBar="#mb";
$(closeBar).click(function(){
$("#mb,"+winBox).hide();
});
}
});
$(".div1").toggleWin(".div2");
$(".div3").toggleWin(".div4");
$(".uf").toggleWin(".div7",true);
$(".btn2").toggSpecify(".showbox",".close,#mb");
})
</script>
</body>
</html>
时间： 2024-10-12 20:34:50