通用弹出层页面(兼容IE、firefox)可关闭控制宽高及屏蔽背景_JSP编程

<%...@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<%.../*
通用弹出层页面(兼容IE、firefox)
说明:
1.openWindows(width,height)----打开弹出层调用的函数,可控制层的宽度和高度
2.hiddenWindows()----关闭弹出层调用函数
3._displaySelect()----隐藏下拉框标签,因为它的优先度太高
4.<div id="LockWindows">----用于实现屏蔽弹出层以下的页面
5.<div id="WindowDIV">----用于显示弹出层的内容
例子(空格自己去掉):
在需要弹出层的页面引用< %@ include file="../common/common_openWindows.jsp"% >
< input type="button" onclick="openWindows('800','700');" value="编辑" / >
< input type="button" onclick="hiddenWindows();" value="关闭" / >
*/%>

复制代码 代码如下:

<style type="text/css">...
#LockWindows{...}{
position:absolute; top:10px; left:10px; background-color:#777777; z-index:2; display:none;
/**//* Moz Family使用私有属性-moz-opacity: 0.70 */
/**//* IE 使用私有属性filter */
/**//* 标准属性opacity支持CSS3的浏览器(FF 1.5也支持)*/
opacity: 0.70;
filter : progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=70,finishOpacity=100);
width:expression(documentElement.clientWidth < 900?(documentElement.clientWidth==0?(body.clientWidth<900?'900':'auto'):'900px'):'auto');
}
#WindowDIV{...}{position:absolute; z-index:3; background-color:#FFFFFF; border:#000000 solid 1px; display:none;}
</style>

<script type="text/javascript">...
//隐藏下拉框,以解决下拉框优先度太高的问题,

复制代码 代码如下:

function _displaySelect()...{
var selects=document.getElementsByTagName("select");//整个页面的所有下拉框
var objWindow = $("WindowDIV");
var DIVselects = objWindow.getElementsByTagName("select");//整个弹出层的所有下拉框
for(var i=0;i<selects.length;i++)...{
if(selects[i].style.visibility)...{
selects[i].style.visibility="";
}else...{
selects[i].style.visibility="hidden";
for(var j=0; i<DIVselects.length; j++)...{
DIVselects[j].style.visibility="";
}
}
}
}
function openWindows(width,height)...{
var objWindow = $("WindowDIV");
var objLock = $("LockWindows");//这个是用于在IE下屏蔽内容用
objLock.style.display="block";
objLock.style.width=document.body.clientWidth+"px";
objLock.style.height=document.body.clientHeight+"px";
objLock.style.minWidth=document.body.clientWidth+"px";
objLock.style.minHeight=document.body.clientHeight+"px";
// 判断输入的宽度和高度是否大于当前浏览器的宽度和高度
if(width>document.body.clientWidth) width = document.body.clientWidth+"px";
if(height>document.body.clientHeight) height = document.body.clientHeight+"px";
objWindow.style.display='block';
objWindow.style.width = width+"px";
objWindow.style.height = height+"px";
// 将弹出层居中
objWindow.style.left=(document.body.offsetWidth-width)/2+"px";
objWindow.style.top=(document.body.offsetHeight-height)/2+"px";
_displaySelect();
}
function hiddenWindows()...{
$("LockWindows").style.display='none';
$("WindowDIV").style.display='none';
_displaySelect();
}
</script>
<div id="LockWindows"> </div>
<div id="WindowDIV">
<%...@ include file="../examination/openEditerDiv.jsp"%>
</div>

时间: 2024-10-25 09:44:14

通用弹出层页面(兼容IE、firefox)可关闭控制宽高及屏蔽背景_JSP编程的相关文章

jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7_jquery

本屌丝最近工作要求重写网站所有代码,so...极其蛋疼的事情出现了,管我的人要求不能用网上的插件,oh~~~my god!! 这是多么能让千万只草原上的马儿奔腾的要求~~~ 先实现一个比较简单的功能: 需求:网页遮罩层/弹出层,兼容IE6 幸好本屌丝以前聪明收集了个js的版本,so,自己改写成了jQuery插件形式的,方便以后使用. 屁话不多放,无码无真相! 复制代码 代码如下: /******************************* * @name Layer跨浏览器兼容插件 v1.

javascript-JavaScript做了个弹出层的form ,请问如何关闭form

问题描述 JavaScript做了个弹出层的form ,请问如何关闭form <div class="form-control" id="sign_in" style="display:none"> <input type="text" class="form-control" placeholder="Username"> <input type=&quo

MC Dialog js弹出层 完美兼容多浏览器(5.6更新)_javascript技巧

效果图:MC Dialog 功能特点 1.支持键盘操作(esc关闭,enter执行当前获得焦点按钮的事件,屏蔽了ctrl键盘,屏蔽了tab键真正实现了一个模拟浏览器自带对话框的功能) 2.支持焦点智能移动(当焦点移出层外时,自动将焦点移回层或者有按钮则移到按钮上,保证焦点始终在层上,确保快捷键操作正确) 3.智能闪烁提示功能(当焦点移出层外部,比如你在层外点击了,则层会闪烁提示你必须在当前层操作,这里完美模拟了浏览器自带对话框的操作) 4.支持按钮外接回调事件(可以自定回调事件,绑定给按钮) 5

jsp ajax div 弹出层-DIV 弹出层没办法实现

问题描述 DIV 弹出层没办法实现 <!DOCTYPE html PUBLIC ""-//W3C//DTD HTML 4.01 Transitional//EN"" ""http://www.w3.org/TR/html4/loose.dtd""> Insert title here#popupcontent{ position: absolute; visibility: hidden; overflow: hi

基于jquery popup弹出层代码

   代码如下 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&

popup弹出层功能增强

 代码如下 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

js与css实现弹出层覆盖整个页面的方法

 本文实例讲述了js与css实现弹出层覆盖整个页面的方法.分享给大家供大家参考.具体实现方法如下: 弹出层透明背景加框的常用样式和结构如下:   代码如下: .alertMessageBg{ position:fixed; _position:absolute; width:100%; height:100%; left:0; top:0; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); z-in

easyui弹出层在最顶层显示跳出iframe框架通用javascript代码

原文:easyui弹出层在最顶层显示跳出iframe框架通用javascript代码 有时候我们用easyui在后台框架中弹框的时候,总是显示在框架页面里面而不是整个系统框架的上面,看着有些不太乐意. dialog = function (opts) { var query = parent.$, fnClose = opts.onClose; opts = query.extend({ title: 'My Dialog', width: 400, height: 220, closed: f

JS弹出层遮罩,隐藏背景页面滚动条细节优化分析_javascript技巧

一.去除滚动条方法 给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加overflow:hidden属性 样式中需要对IE6.7及其它浏览器用hack辨别,这是因为当页面拉到下面时如果html或body被overflow:hidden,透明弹层下面的页面就会被部分正常隐藏,通过透明看到的一片的灰度,具体颜色跟平台及用户设置背景色有关. body或html去掉滚动条后,页面会有一个滚动条宽度/2的跳动!这个跳动对用户体验来十分不好,因此给body添加一下