纯css实现点击链接弹出浮动窗口（可关闭）

许多人在做网站的时候都想做的更加便捷、炫酷，想实现，如何点击超级链接弹出浮动层功能，网上搜罗了一部分方法，出现的都是大量的js代码，大家都知道在网站优化过程中，搜索引擎是无法识别js代码，而且js代码会严重影响css加载速度，在这里西安网站优化自己写出了一份简单的纯css+div实现点击超级链接弹出浮动层（可关闭）功能，在这里贴出代码，供大家参考学习。

CSS代码如下：

.white_content {
       display: none; 
 top:23%;
 left:33%;
 position: absolute;
 width: 33%;
 height:auto;
 border: 1px solid #CCCCCC;
 background-color: #FFFFFF;
 z-index:1002;
 overflow: auto;
 position: fixed;
 _position: absolute;
    _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,100)||0)-(parseInt(this.currentStyle.marginBottom,100)||0)));
        } 
    .tanchu_baojiaqit {
 float: left;
 width: 100%;
 text-align: right;
 height: 27px;
 position: relative;
 padding-top: 5px;
 padding-bottom: 5px;
 background-color: #E12D4A;
}
.tanchu_baojiaqit_title {
 color: #FFFF00;
 background-color: #E12D4A;
 text-align: center;
 float: left;
 width: 100%;
 font-size: 32px;
 line-height: 40px;
 font-weight: bold;
 padding-bottom: 27px;
}
.tanchu_baojiaqit_bd {
 float: left;
 width: 100%;
 padding-top: 15px;
}
.tanchu_baojiaqit span {
 padding-right: 10px;
}
.tanchu_baojiaqit_tx {
 font-size: 12px;
 line-height: 25px;
 font-weight: normal;
 color: #666666;
 text-align: center;
 float: left;
 width: 100%;
}

HTML代码

<a href="javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'" class="hover">商务合作</a>

这种方法非常适合在线报名类实现，便于用户，并且大气美观，而且代码精简，无JS代码。

大家可以预览效果：

其中有一个关闭按钮，关闭按钮图标大家另存为即可。