浮动窗口

 

<!--浮动窗口相关-->

1.css

body{
margin:0px;
padding: 0px;
}
#closeFloat{
position: absolute;
right: 0;
top: 0;
width: 36px;
height: 36px;
}
#showFloat{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100001;
filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#B2000000',endColorstr='#B2000000');
background-color: rgba(0,0,0,0.7);
}
.advertisement_pic{
position: absolute;
left: 50%;
top: 50%;
transform:translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);    
}

2.js

$(function(){
var h,w;
h = $(window).height();
w = $(window).width();
showWindow(h,w);
hiddenWindow();
//$("#showFloat").css("margin","100px auto").css("text-align","center");
$("#closeBtn").click(function(){
$("#showFloat").fadeOut();
});
});
function showWindow(h,w){

var time = sessionStorage.getItem("times");
if(time=="1"){

}else {
setTimeout(function(){

$("#showFloat").show();
sessionStorage.setItem("times","1" );
},500);
}

}
/*定时关闭时间=要关闭的时间+多久之后展示的时间*/
function hiddenWindow(){
setTimeout(function(){
$("#showFloat").hide();
},15000);
}

3.html

<div id="showFloat" style="display: none;">
  <div class="advertisement_pic">
    <a id="contentFloat" href="http://www.10039.cc/bzzx/mayc/">
      <img src="/www/icss/js/may_logo1.png" style="vertical-align: top;" alt="浮动窗口" id="showImg" />
    </a>
  <div id="closeFloat">  
    <a href="javascript:void(0);">
      <img id="closeBtn" src="/www/icss/js/may_logoClose.png" style="width:40px;" alt="关闭按钮" />
    </a>
  </div>
</div>
<div>