一个简单的弹出层:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script src="jquery-1.3.2.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function(){
//点击显示遮蔽层并动态设置遮蔽层的高度
$("button").click(function(){
$("#overlayer").height($(document).height()).fadeIn("slow");
$(".pop_div_title a").click(function(){
$("#overlayer").fadeOut("slow");
});
});
});
</script>
<style type="text/css">
body {
margin: 0; /*除去body和浏览器之间的间距*/
/*
height:100%;
*/
}
/*遮蔽层样式*/
#overlayer {
background-color: #000000;
/* 百分之百是指父容器高度的百分之百,
* 所以在IE中如果没有指定body的父容器的高度,
* 则子元素的100%只是一个默认的高度,但FF却不会
* FF中会显示当前浏览的高度,为了适应内容 的高度,
* 在这里动态设置高度。
* */
height: 100%;
opacity: 0.7;
*filter: alpha(opacity = 70);
position: absolute;
width:
100%;
z-index:
3;
/*初始不显示遮蔽层*/
display:none;
}
/*弹出层样式*/
#pop_div {
width: 262px;
height: 194px;
border: 5px solid #E9F3FD;
position:absolute;
top:300px;
left:45%;
}
.pop_div_title {
height: 30px;
border: 1px solid #A6C9E1;
background-color: white;
}
.pop_div_title span{
margin:0 0 0 180px;
}
.pop_div_content {
height:160px;
border: 1px solid #A6C9E1;
background-color: white;
}
#container {
width: 100%;
height: 1000px;
}
</style>
</head>
<body>
<div id="overlayer">
<div id="pop_div">
<div class="pop_div_title">
标题<span><a>关闭</a></span>
</div>
<div class="pop_div_content">
这是弹出DIV内容
</div>
</div>
</div>
<div id="container">
<button>
试试
</button>
</div>
</body>
</html>
效果:
在样式和拖拽方面可以优化,期待改进……
- 大小: 64 KB
分享到:
相关推荐
jquery 弹出层jquery 弹出层jquery 弹出层jquery 弹出层jquery 弹出层
jQuery顶部浮动弹出层动画弹出层特效 jQuery顶部浮动弹出层动画弹出层特效 jQuery顶部浮动弹出层动画弹出层特效 jQuery顶部浮动弹出层动画弹出层特效
如下所示: // 弹出楼栋负责人信息页面 layer.open({ type: 2, title:'请选择楼栋负责人', maxmin: false, area: ['60%', '80%'], ... //当点击‘确定'按钮的时候,获取弹出层返回的值 var res
弹出层表单提交数据完美解决弹出层表单提交数据完美解决弹出层表单提交数据完美解决弹出层表单提交数据完美解决
遮罩弹出层 ; charset=utf-8" /> <title>jquery弹出层鼠标点击弹出层可浮动在...弹出层当鼠标点击文字或图片弹出层,弹出层浮动在屏幕上可以随浏览器上下滚动,弹出层可自动居中在页面中间。jquery下载。" /> </head>
弹出层2,可以弹出多个层,并实现数据交互,第二个收集的弹出层,插件
jquery弹出层当鼠标点击文字或图片弹出层,弹出层浮动在屏幕上可以随浏览器上下滚动,弹出层可自动居中在页面中间
js弹出div获取弹出层中文本值 经测试适用于现在主流 浏览器如:IE6+.. ff 等等
jquery弹出层插件,20种弹出层,特效杠杠滴
jquery特效插件FancyBox弹出层支持多种方式弹出层如:图片弹出层、文字信息弹出层、flash弹出层、ajax弹出层、Iframe弹出层。 支持。 IE6 IE7 IE8及以上 Firefox
这个可以自定义的 可以弹出层关闭 父页面刷新 ,可以弹出层不关闭 父页面刷新
这些功能很小,不值得用一个页面来实现其功能,那么“弹出层”就是最好的选择了。弹出层顾名思义,就是在原网页中弹出一个遮罩层,操作就在这个遮罩层中进行。 其实遮罩层就是一个div只不过要控制好他何时显示,何时...
html5手机端点击弹出层
这个例子是,div弹出层并且固定位置,弹出层的弹出方式为滑动方式。
弹出层注册协议弹出层注册协议弹出层注册协议弹出层注册协议弹出层
鼠标经过弹出层,鼠标经过弹出层,鼠标经过弹出层,鼠标经过弹出层
今天小编就为大家分享一篇layer弹出层全屏及关闭方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
jQuery.UI.Impromptu.js jQuery 弹出层 浮动层 提示框 并随页面滚动而滚动 实现弹出层不再难,只要引用jQuery.UI.Impromptu.js这个js文件后,想要弹出哪个tag都行了 如:我想要这里是弹出浮动遮罩层</div> 并随页面...
iphone 弹出层 iphone 弹出层 iphone 弹出层 iphone 弹出层 iphone 弹出层
很犀利的弹出层,弹出层代码!灰常好用!大家可以试试