jquery写的弹出层
来源：互联网 发布：php ajax跨域请求 编辑：程序博客网 时间：2024/04/29 06:47
index.html
Html代码 
- <body>
- <div class="field"><input type="checkbox" id="choose"/><label for="choose">查看历史记录</label><select><option>ie6</option></select></div>
- <div class="comparison"><div>
- </body>
popUpBox.html
Html代码
- <ul>
- <li class="left">
- <h3>描述</h3> <div>wwwwwwwwwwwwwwwwwwwwwwww1wwwwwwwwwwwwwwwwwww5wwwwwwwwwwwwwwwwwwwwww4wwwwwwwwwwwwwwwwwww1wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww1wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww3wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww2wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</div>
- </li>
- <li class="right">
- <h3>描述</h3>
- <div>07年将是web标准大面积推广的年份07年将是web标准大面积推广的年07年将是web标准大面积推广的年份07年将是web标准大面积推广的年07年将是web标准大面积推广的年份07年将是web标准大面积推广的年07年将是web标准大面积推广的年份07年将是web标准大面积推广的年07年将是web标准大面积推广的年份07年将是web标准大面积推广的年07年将是web标准大面积推广的年份07年将是web标准大面积推广的年07年将是web标准大面积推广的年份07年将是web标准大面积推广的年07年将是web标准大面积推广的年份07年将是web标准大面积推广的年</div>
- </li>
- </ul>
- <span class="close">CLOSE</span>
css
Html代码
- <style>
- ul,li,h3,div{ margin:0;padding:0;font-size:12px;}
- div.comparison{display:none;z-index:3;position:absolute;width:800px;border:2px dashed #333;background-color:#fff;padding:10px;}
- ul{list-style-type:none;clear:both;overflow:hidden;height:120px;}
- li.left{float:left;width:395px;}
- li.right{width:395px;float:right;}
- h3,span.close{color:green;font-size:16px;}
- span.close{float:right;font-weight:bold;cursor:pointer;}
- li div{word-wrap:break-word;overflow:auto;border:1px solid #333;max-height:80px;_height:auto;padding:3px;margin:10px 0;}
- .wrap{z-index:1;background-color:#000;opacity:0.1;filter:alpha(opacity:10);position:absolute;left:0;top:0;width:100%;}
- iframe.ie6Bug{border:0;z-index:2;position:absolute;left:0;top:0;width:100%;background-color:#000;}
- </style>
javascript
Js代码
- <script type="text/javascript">
- $(document).ready(function(){
- function browserIe(){
- if ($.browser.msie && $.browser.version < 7) {
- $("li div").each(function(){
- var HeightValue = $(this).height();
- if(HeightValue >= 80){
- $(this).css("height","80");
- }
- else{
- $(this).css("height","auto");
- }
- });
- }
- }
- function closeEvent(){
- $("span.close").click(function(){
- $(".wrap,div.comparison,iframe.ie6Bug").hide();
- $(".field #choose").attr("checked","");
- $("select").show();
- });
- }
- $("#choose").bind("click",function(){
- $(".comparison").load("popUpBox.html",function(){
- var bodyWidth = document.documentElement.clientWidth;
- var bodyHeight = Math.max(document.documentElement.clientHeight,document.body.scrollHeight);
- if($("#choose").attr("checked")){
- if ($.browser.msie && $.browser.version < 7) {
- $("<iframe class='ie6Bug'></iframe>").appendTo("body");
- $("select").hide();
- }
- $("<div class='wrap'></div>").appendTo("body");
- $(".wrap").width(bodyWidth);
- $(".wrap").height(bodyHeight);
- $(".ie6Bug").width(parseInt($(".comparison").width()) + parseInt($(".comparison").css("padding-left")) + parseInt($(".comparison").css("padding-right")));
- $(".ie6Bug").height(parseInt($(".comparison").height()) + parseInt($(".comparison").css("padding-top")) + parseInt($(".comparison").css("padding-bottom")));
- $("div.comparison,.ie6Bug").css({"left":(bodyWidth-$('div.comparison').width()) / 2 + "px","top":(document.documentElement.clientHeight-$('div.comparison').height()) / 2 + document.documentElement.scrollTop +"px"}).show();
- browserIe();
- closeEvent();
- }
- });
- });
- })
- </script>
1. 通过ajax方法在当前index页面点击input后load一个新页面popUpBox.
2. 为了区分弹出层内容和当前页的内容，需要在中间插入一个层，给背景色，用滤镜调整透明度。
动态获取当前页面的高度宽度。
var bodyWidth = document.documentElement.clientWidth;
var bodyHeight = Math.max(document.documentElement.clientHeight,document.body.scrollHeight);
document.documentElement.clientHeight指当前浏览器的可视范围内高度。
document.body.scrollHeight指页面body里内容的高度。
当浏览器里y方向不出现滚动轴时 var bodyHeight = document.documentElement.clientHeight；
当浏览器里y方向出现滚动轴时 var bodyHeight = document.body.scrollHeight；
关于怎么取页面宽度高度的各种问题大家可以googe一下，方法很多。
Js代码
- 网页可见区域宽： document.body.clientWidth;
- 网页可见区域高： document.body.clientHeight;
- 网页可见区域高： document.body.offsetWeight //包括边线的宽
- 网页可见区域高： document.body.offsetHeight //包括边线的宽
- 网页正文全文宽： document.body.scrollWidth
- 网页正文全文高： document.body.scrollHeight
- 网页被卷去的高： document.body.scrollTop
- 网页被卷去的左： document.body.scrollLeft
- 网页正文部分上： window.screenTop
- 网页正文部分左： window.screenLeft
- 屏幕分辨率的高： window.screen.height
- 屏幕分辨率的宽： window.screen.width
- 屏幕可用工作区高度： window.screen.availHeight
- <span style="color: rgb(0, 0, 0);">屏幕可用工作区宽度： window.screen.availWidth </span>
3.通过绝对定位让弹出框显示在水平，垂直居中的位置。
Js代码
- $("div.comparison,.ie6Bug").css({"left":(bodyWidth-$('div.comparison').width()) / 2 + "px","top":(document.documentElement.clientHeight-$('div.comparison').height()) / 2 + document.documentElement.scrollTop + "px"}).show();
left：用（浏览器的可视宽度-弹出层的宽度）/2
top：用（浏览器的一屏高度-弹出层的高度）/2 + 纵向滚动条滚过的高度
4.解决ie6的bug
a.如果弹出层下面是select框就遮不住，需要在当前页面和弹出层之间加一个iframe层就可以遮住当前页面的select，iframe层的大小和弹出层的大小一样。
b.弹出层以外的select框只有当弹出层出现后让select框隐藏，关闭弹出层后在让select框出现
c.或者用input框+js来模拟select框就不会出现a，b的问题。
5.弹出层里的内容是两个div模拟的文本框，用max-height给最大高度，ie6不认max-height.
那么判断当前浏览器和版本，用js动态取文本框的高度来设定最大高度
- jquery写的弹出层
- jquery的弹出层
- JQuery写的一个弹出提示层与定位的小代码
- 自己写了一个jQuery的弹出层，非常非常简单
- Qml 写的弹出层控件
- 带有透明边框的jQuery弹出层
- 一个简单的JQuery弹出层类
- jQuery实现很炫很酷的弹出层效果
- jQuery实现很炫很酷的弹出层效果
- Jquery +css弹出层的操作
- 非常简单好看的JQuery弹出层
- jQuery 弹出层 弹出对话框
- jquery实现弹出层
- jQuery 弹出提示层
- jQuery 弹出层实例
- jQuery jqModal弹出层
- jquery弹出层实例
- jquery 弹出层
- 再说吧，一辈子还长着
- C#_F2按钮清空的常用方法_面试题
- 关于ORACLE数据库中汉字显示乱码问题的探讨
- Dreamweaver 图像特效制作技法
- 【asp.net】使用XPathExpression类对XML进行排序
- jquery写的弹出层
- ORACLE DATE和TIMESTAMP数据类型的比较
- 用C#编程实现检查Scroll Lock键的状态
- Shell对话框（二）
- kernel make menuconfig ----------yield .config
- 【javascript】火狐浏览器兼容原则
- Linux下Oracle9i RMAN备份及恢复步骤
- BroadcastSystemMessage
- 通过鼠标任意拖动.NET Winform窗体中的控件
