您好,欢迎访问【高丹SEO】网站登录
西安SEO为您提供SEO基础知识,SEO排名技术,网站优化教程,SEO问题解答,网站优化,网站SEO顾问等服务。
首页 >> 网站建设经验 >> 纯css实现点击链接弹出浮动窗口(可关闭)

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

2018-02-24 3
浏览次数1260次

许多人在做网站的时候都想做的更加便捷、炫酷,想实现,如何点击超级链接弹出浮动层功能,网上搜罗了一部分方法,出现的都是大量的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代码。

大家可以预览效果:

点击链接弹出浮动层-效果演示

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

可关闭按钮-可右击另存为

全部评论:3
1#
营销软件2018年3月4日下午1:30 回复

新年虽已过,好运不打折!

2#
三五创业网2018年3月9日上午10:22 回复

找了好久才找到这里,来了就不想走!

3#
椰壳活性炭2018年5月17日下午2:18 回复

终于找到了,感激