百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome_javascript技巧

之前发布过这样的代码,其实问题不大,但这里的版本主要是增加一些功能,回调执行服务器端的方法,对于asp.net开发或ajax开发都是非常有价值的改进。
先看下效果图:

原有百度的Popup.js在有

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

声明的网页下存在兼容性问题,即在IE6,7,8下,遮罩层是可以全屏,但在Firefox和Chrome下无法全屏遮罩。
  造成遮罩层在FF和Chrome下无法全屏的问题在267行:

复制代码 代码如下:

var C = '<div id="dialogBoxBG" style="position:absolute;top:0px;left:0px;width:100%;height:100%;z-index:' + A + ";" + H + "background-color:" + this.color.cColor + ';display:none;"></div>';

遮罩层dialogBoxBG 的style只是单纯的设置为height:100%,所以在有<!DOCTYPE...>声明下的页面无法兼容FF和Chrome。
然而目前网上有一个“luocheng”的“完美版”popup.js,下载下来试用了下,结果并没有完全兼容FF和Chrome,还是存在遮罩层无法全屏的bug,读了一下源代码,找到了错误所在:luocheng的版本中增加了一个getValue方法,switch语句中的case "clientHeight":竟然有两个!删掉一个以后继续测试,还是无法兼容FF和Chrome,继续读代码排错,增加的setBackgroundSize方法中G('dialogBoxBG').style.height = getValueHeight;只是复制给遮罩层dialogBoxBG的height=整数值,这个是不遵循web标准的,所以在FF和Chrome下存在bug。

复制代码 代码如下:

setBackgroundSize: function() {
var getValueWidth;
var getMaxValueWidth = [getValue("clientWidth"), getValue("scrollWidth")];
getValueWidth = eval("Math.max(" + getMaxValueWidth.toString() + ")");
G('dialogBoxBG').style.width = getValueWidth;
var getValueHeight;
var getMaxValueHeight = [getValue("clientHeight"), getValue("scrollHeight")];
getValueHeight = eval("Math.max(" + getMaxValueHeight.toString() + ")");
G('dialogBoxBG').style.height = getValueHeight; },

解决方法很简单:G('dialogBoxBG').style.height = getValueHeight;修改成G('dialogBoxBG').style.height = getValueHeight + "px";即可。
所以大家以后在开发过程中,注意对于宽度与高度最好加上'px';这样的单位。

令附上获取页面高度在不同浏览器之间的差异参考资料:
  clientHeight:在IE和FF下,该属性没什么差别,都是指浏览器的可视区域,即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度;
  scrollHeight:在IE下,scrollHeight 是页面实际内容的高度,可以小于clientHeight;在FF下,scrollHeight 是网页内容高度,不过最小值是clientHeight。
/*******************************************************/
拓展方法:
1.弹出确认框回调执行服务器端方法

复制代码 代码如下:

function ShowConfirm(title, content, target) //显示确认对话框
{
var pop = new Popup({
contentType: 3,
isReloadOnClose: false,
width: 350,
height: 110
});
pop.setContent("title", title);
pop.setContent("confirmCon", content);
pop.setContent("callBack", ShowCallBackServer); //回调函数
pop.setContent("parameter", {
id: "divCall",
str: target,
obj: pop
});
pop.build();
pop.show();
popp = pop;
return false;
}
//执行服务器端方法,即进行__doPostBack('','')操作
function ShowCallBackServer(para) {
var str = para["str"];
if ("" != str && null != str) {
str = GetEachBtnName(str);
if ("" != str && null != str) {
//alert(str);
__doPostBack(str, '');
}
}
ClosePop();
}
//遍历页面中的Button名称
function GetEachBtnName(obj) {
return obj.name == '' || obj.name == null ? obj.id : obj.name;
}

使用方法:
  在一个有OnClick="btnTest_Click" 的Button控件上注册OnClientClick为return ShowConfirm(' ','是否确定删除?',this)。
完整代码:

复制代码 代码如下:

<asp:Button ID="btnDel" runat="server" Text="删除" OnClick="btnDel_Click" OnClientClick="return ShowConfirm(' ','是否确定删除?',this)" />

2.在iframe中使用popup.js
我们在一个页面中内嵌了一个iframe,想让iframe中弹出的对话框或者确认框在父页面中弹出来,实现遮罩层全屏而不是只是在iframe页面中全屏,然后确认后执行回调操作iframe,可以是执行iframe中的服务器端方法。

复制代码 代码如下:

function ShowConfirmIFrame(title, content, target) //显示确认对话框
{
var pop = new Popup({
contentType: 3,
isReloadOnClose: false,
width: 350,
height: 110
});
pop.setContent("title", title);
pop.setContent("confirmCon", content);
pop.setContent("callBack", ShowIFrame); //回调函数
pop.setContent("parameter", {
id: "divCall",
str: target,
obj: pop
});
temp = target;
pop.build();
pop.show();
popp = pop;
return false;
}
var temp;
function ShowIFrame() {
parent.frames["content"].window.ShowCallBackServerIFrame(temp);
// parent.window.iframe.ShowCallBackServer();
}
function ShowCallBackServerIFrame(para) {
var str = para;
if ("" != str && null != str) {
str = GetEachBtnName(str);
if ("" != str && null != str) {
__doPostBack(str, '');
}
}
closeWin();
}

使用方法:
iframe中定义js方法:

复制代码 代码如下:

   //删除
function subDel(obj)
{
return parent.parentDel(obj);
}

Button按钮控件注册OnClientClick事件:

复制代码 代码如下:

<asp:Button ID="btnDel" runat="server" OnClick="btnDel_Click" ToolTip="删除" CssClass="deleteBtn" OnClientClick="return subDel(this);return false;" />

父页面定义js方法:

复制代码 代码如下:

function parentDel(obj)
{
return ShowConfirmIFrame('删除','是否确定删除?',obj);
}

popup.js进化版与普通修正版下载  原版也修正了上面所说的并没有完全兼容FF和Chrome的问题。

时间: 2024-08-02 19:55:31

百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome_javascript技巧的相关文章

C# webbroser 自动点击JS弹出框?

问题描述 想做个挂站的小东东大体完成了,现在有个小问题我在挂站一段时间以后,会有一个退出的链接,点击后显示你本次的在线时间等信息,当你点击确定以后才算是真的退出现在问题是,我通过代码点击了退出链接后,弹出的js对话框阻塞了程序,我如何可以通过代码去点击这个JS弹出框的确定按钮??? 解决方案 解决方案二:你自己把这个对话框点了,那你弹出他来又有什么意义呢?用户也看不到他的在线时间等信息啊!解决方案三:overrideShowMessagewww.codeproject.com/KB/miscct

js 弹出框插件实例与代码使用方法

js 弹出框插件实例与代码使用方法 使用方法: 1. 调用jquery库以及zxxbox插件文件,如下代码: <script type="text/网页特效" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script><script type="text/javascript" src="/study/js/jq

js弹出框、对话框、提示框、弹窗实现方法总结(推荐)_javascript技巧

一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹出对话框并输出一段提示信息 function ale() { //弹出一个对话框 alert("提示信息!"); } //弹出一个询问框,有确定和取消按钮 function firm() { //利用对话框返回的值 (true 或者 false) if (confirm("你确定提交吗?")) { aler

前端js弹出框组件使用方法_javascript技巧

下面分享一个js 弹出窗, 分 toast , dialog , load 三种弹窗 , 下面用js css 来实现以下: 首先是js代码 | 采用了 es6 的写法 //公共弹窗加载动画 const DIALOG_TOAST = '1', DIALOG_DIALOG = '2', DIALOG_LOAD = '3', class Dialog { constructor(type = DIALOG_DIALOG, dialogContent = '请求失败', wrapClassName =

右击拖拽不弹出对话框-鼠标右键拖拽图片超链接,拖拽完成后如何不弹出对话框

问题描述 鼠标右键拖拽图片超链接,拖拽完成后如何不弹出对话框 鼠标右键拖拽图片超链接,拖拽完成后如何不弹出对话框,我已经可以用右键拖拽了,但是完成后他会弹出右键的对话框.该如何编写代码 解决方案 mousedown移除href属性,mouseup的时候判断是否移动过,如果移动过就设置href触发跳转,要不延时设置href即可. <style>a{position:absolute;}</style> <script type="text/javascript&quo

JS弹出框乱码?怎么解决

问题描述 用JS验证网页内容弹出框乱码,在eclipse里预览jsp时显示正常,部署到服务器上再用浏览器打开网页,弹出框就乱码了.先前不会的,项目做到后面就出这问题了 解决方案 解决方案二:仔细看看编码哪里没有设置好,解决方案三:问一下你楼主:你的JS代码是外部引用还是直接在代码中加入的?解决方案四:<%=URLEncoder.encode(要转码的内容,utf-8")%>解决方案五:外部引入的charset设置是GBK解决方案六:你必须设置IE浏览器的编码方式吧解决方案七:最好设成

js弹出框轻量级插件jquery.boxy使用介绍_jquery

当你需要使用弹出框时,当然可以使用jquery-ui,artdiag,blockUI等等,但今天我介绍一个轻量级的插件 boxy!它可以把美工设计的弹出框很容易的体现出来,而且兼容性还不错! 复制代码 代码如下: <script type='text/javascript'> $(function() { $('#ask-actuator').click(function() { Boxy.ask("How are you feeling?", ["Great&q

Js 弹出框口并返回值的两种常用方法_javascript技巧

1.window.showModalDialog(url,args,dialogattrs) 参数说明: url:弹出页面地址 agrs:主窗口传给对话框的参数,可以是任意类型(数组也可以) dialogattrs:弹出窗口的样式参数 模式对话框用法: 主窗口:var value =window.showModalDialog('test.jsp',strs,'resizable:yes'); 弹出框中通过window.returnValue来设置返回值,上面的value拿到的就是这个值,然后主

js 弹出框只弹一次(二次修改之后的)_javascript技巧

弹出框只弹一次,看到网上也就写的很多,但真正能拿过来用的没有几个.以下是我修改之后的代码,供参考. 这段代码是使用了cookie来控制的,首先使用cookie让浏览器记住这个页面已经打开过一次,如果再次引用这个页面已经打开一次了,如果再次引用这个页面的话将不进行打开.而浏览器一旦关闭浏览器,保存这个记录的cookie文件将被删除.因此关闭浏览器,再次打开的话弹出窗口还会出现的,从而确保了在原有的窗口基础上只打开一个窗口. 复制代码 代码如下: <script type="text/java