关闭

纯CSS弹出层的示例代码

7831人阅读 评论(0) 收藏 举报
分类:
<html>
<head>
	<style>
		.bluequestionmark
		{
    		background-repeat:no-repeat;
    		display:inline-block;
    		background-size:16px 16px;
    		width:16px;
    		height:16px;
    		position:relative;/*the out div must be position:relative*/
		}

		a.tipinfo
		{
    		display:none;
		}

		div.bluequestionmark:hover a.tipinfo
		{
    		white-space:nowrap;/*the pop up infomation will show in one line*/
    		display:block;
    		border:1px solid #0094ff;
   			position:absolute;
    		top:18px;
    		left:0px;
    		padding:6px 10px;
    		background-color:white;
		}

		a.tipinfo:hover a.tipinfo
		{
    		white-space:nowrap;
    		display:block;
    		border:1px solid #0094ff;
   			position:absolute;
    		top:18px;
    		left:0px;
    		padding:6px 10px;
    		background-color:white;
    		cursor: text;
		}
	</style>
</head>
<body>
	move your mouse to pic
	<div class="bluequestionmark" style="background-image:url('http://img.blog.csdn.net/20131206112028640')">
        <a class="tipinfo">a lot of pop up information</a>
    </div>
</body>
</html>

0
0
查看评论

一个十分简单的div弹出层小例子

一个十分简单的div弹出层小例子
  • jdfkldjlkjdl
  • jdfkldjlkjdl
  • 2014-09-15 21:41
  • 9659

div+css=>遮罩+弹出框(固定在页面中间)

效果图css代码<style type="text/css" > body{ font-family: "Microsoft YaHei" ! important; } /*灰色遮罩层*/ .fade{ width:100%; ...
  • Seety_ST
  • Seety_ST
  • 2015-10-10 10:35
  • 7014

div弹出框/弹出层简单实现办法

弹出框实现办法非常多,但是有不少实现办法比较复杂,不容易实现,
  • zurich1979
  • zurich1979
  • 2014-06-30 12:13
  • 13097

DIV弹出层 可移动 可关闭,demo直接使用

DIV弹出层 可移动 可关闭,demo直接使用
  • netuser1937
  • netuser1937
  • 2017-02-08 08:52
  • 1098

div+css模拟弹出窗口

CSS#div { position:absolute; left:0; right:0; top:0; bottom:0; z-index...
  • JJzxz
  • JJzxz
  • 2014-11-24 14:38
  • 2909

div+css实现简单的弹出窗(背景变灰色)

自己做了一个网站,需要用到弹出框的功能,以前没做过这个,就去网上查了下资料,然后试着写了一个最简单的弹出框效果。 需求:点击弹出框按钮,在原页面基础上弹出一个弹出框,并且背景要变成灰色,原页面不能被编辑知道关闭弹出框。 原理:在原页面的基础上添加两个div,一个是弹出框,一个是弹出框后面的背景层...
  • leedaning
  • leedaning
  • 2015-05-26 14:24
  • 8313

纯css写弹窗 html

css background-color: #fff; border: 5px solid rgba(0, 0, 0, 0.4); height: 250px; left: 50%; margin: -200px 0 0 -100px; padding...
  • qq_22823581
  • qq_22823581
  • 2017-09-19 13:44
  • 303

使用css设计弹出窗口

css文件 .glass{ background-color: #666 ; width: 100%; height: 100%; left: 0; top: 0; /*FF IE7*/ filter: a...
  • WitsMakeMen
  • WitsMakeMen
  • 2013-10-25 14:38
  • 2846

html+css+js实现点击弹出窗口效果

  • 2017-04-23 19:55
  • 2KB
  • 下载

div+css 弹出层

  • 2012-11-14 12:57
  • 40KB
  • 下载
    个人资料
    • 访问:700431次
    • 积分:9146
    • 等级:
    • 排名:第2419名
    • 原创:228篇
    • 转载:46篇
    • 译文:1篇
    • 评论:72条
    文章分类