之前发布过这样的代码，其实问题不大，但这里的版本主要是增加一些功能，回调执行服务器端的方法，对于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的问题。
先看下效果图：
原有百度的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的问题。
标签：
百度,Popup.js,弹出框
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
桃源资源网 Design By www.nqtax.com
暂无“百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome”评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。