布局:
<div id="shard" ></div>
<div id="test">
<a href="javascript:;" id="button">clickMe</a>
<div id="content" style="display:none">show</div>
</div>
样式:
#test {
width: 80px;
height: 60px;
margin:10px auto;
/*border: 1px solid blue;*/
}
#button {
display: block;
width:50px;
margin:10 auto;
}
#content {
width: 60px;
height: 60px;
text-align: center;
margin:10 auto;
/*background: #1d1d1d;*/
border: 1px solid red;
}
#shard {
position: absolute;
display: block;
top: 0px;
left:0px;
width: 100%;
height: 100%;
z-index: -1;
background: #d4f7d4;
}
js:
1>
// $('#shard').hide();
// $('#button').click(function(){
// $('#content').show();
// $('#shard').unbind('click');
// $('#shard').show();
// $('#shard').one('click',function(){
// $('#content').hide();
// })
// })
2>
// $('#shard').hide();
// $('#button').click(function(){
// $('#content').show();
// $('#shard').show();
// return false;
// })
// $('#shard').on('click',function(){
// $('#content').hide();
// })
3>
// $('#shard').hide();
// $('#button').on('click',function(){
// $('#content').css('display','block');
// $('#shard').off('click');
// $('#shard').hide();
// setTimeout(function(){
// $('#shard').show();
// $('#shard').one('click',function(){
// console.log('click ...');
// $('#content').css('display','none');
// $('#shard').hide();
// })
// }
// , 0);
// })