jQuery 弹窗的问题 本帖最后由 chl19871024 于 2010-01-08 11:49:02 编辑 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 $(function(){ document.parent.$("#iframe1").click(function(){ tipsWindown("添加企业名片","iframe:http://www.qq.com","700","400","true","","true",""); }); });///-------------------------------------------------------------------------//jQuery弹出窗口 By Await [2009-11-22]//--------------------------------------------------------------------------/*参数:[可选参数在调用时可写可不写,其他为必写]---------------------------------------------------------------------------- title: 窗口标题 content: 内容(可选内容为){ text | id | img | url | iframe } width: 内容宽度 height: 内容高度 drag: 是否可以拖动(ture为是,false为否) time: 自动关闭等待的时间,为空是则不自动关闭 showbg: [可选参数]设置是否显示遮罩层(0为不显示,1为显示) cssName: [可选参数]附加class名称 ------------------------------------------------------------------------*/ //示例: //------------------------------------------------------------------------ //simpleWindown("例子","text:例子","500","400","true","3000","0","exa") //------------------------------------------------------------------------var showWindown = true;var templateSrc = "http://leotheme.cn/wp-content/themes/Dreamy"; //设置loading.gif路径function tipsWindown(title,content,width,height,drag,time,showbg,cssName) { $("#windown-box").remove(); //请除内容 var width = width>= 950?this.width=950:this.width=width; //设置最大窗口宽度 var height = height>= 527?this.height=527:this.height=height; //设置最大窗口高度 if(showWindown == true) { var simpleWindown_html = new String; simpleWindown_html = "<div id=\"windownbg\" style=\"height:"+$(document).height()+"px;filter:alpha(opacity=0);opacity:0;z-index: 999901\"></div>"; simpleWindown_html += "<div id=\"windown-box\">"; simpleWindown_html += "<div id=\"windown-title\"><h2></h2><span id=\"windown-close\">关闭</span></div>"; simpleWindown_html += "<div id=\"windown-content-border\"><div id=\"windown-content\"></div></div>"; simpleWindown_html += "</div>"; $("body").append(simpleWindown_html); show = false; } contentType = content.substring(0,content.indexOf(":")); content = content.substring(content.indexOf(":")+1,content.length); switch(contentType) { case "text": $("#windown-content").html(content); break; case "id": $("#windown-content").html($("#"+content+"").html()); break; case "img": $("#windown-content").ajaxStart(function() { $(this).html("<img src='"+templateSrc+"' class='loading' />"); }); $.ajax({ error:function(){ $("#windown-content").html("<p class='windown-error'>加载数据出错...</p>"); }, success:function(html){ $("#windown-content").html("<img src="+content+" alt='' />"); } }); break; case "url": var content_array=content.split("?"); $("#windown-content").ajaxStart(function(){ $(this).html("<img src='"+templateSrc+"' class='loading' />"); }); $.ajax({ type:content_array[0], url:content_array[1], data:content_array[2], error:function(){ $("#windown-content").html("<p class='windown-error' style='color:#FF0000'>加载数据出错...</p>"); }, success:function(html){ $("#windown-content").html(html); } }); break; case "iframe": $("#windown-content").ajaxStart(function(){ $(this).html("<img src='"+templateSrc+"' class='loading' />"); }); $.ajax({ error:function(){ $("#windown-content").html("<p class='windown-error'>加载数据出错...</p>"); }, success:function(html){ $("#windown-content").html("<iframe src=\""+content+"\" width=\"100%\" height=\""+parseInt(height)+"px"+"\" scrolling=\"auto\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\"></iframe>"); } }); } $("#windown-title h2").html(title); if(showbg == "true") {$("#windownbg").show();}else {$("#windownbg").remove();}; $("#windownbg").animate({opacity:"0.5"},"normal");//设置透明度 $("#windown-box").show(); if( height >= 527 ) { $("#windown-title").css({width:(parseInt(width)+22)+"px"}); $("#windown-content").css({width:(parseInt(width)+17)+"px",height:height+"px"}); }else { $("#windown-title").css({width:(parseInt(width)+10)+"px"}); $("#windown-content").css({width:width+"px",height:height+"px"}); } var cw = document.documentElement.clientWidth,ch = document.documentElement.clientHeight,est = document.documentElement.scrollTop; var _version = $.browser.version; if ( _version == 6.0 ) { $("#windown-box").css({left:"50%",top:(parseInt((ch)/2)+est)+"px",marginTop: -((parseInt(height)+53)/2)+"px",marginLeft:-((parseInt(width)+32)/2)+"px",zIndex: "999999"}); }else { $("#windown-box").css({left:"50%",top:"50%",marginTop:-((parseInt(height)+53)/2)+"px",marginLeft:-((parseInt(width)+32)/2)+"px",zIndex: "999999"}); }; var Drag_ID = document.getElementById("windown-box"),DragHead = document.getElementById("windown-title"); var moveX = 0,moveY = 0,moveTop,moveLeft = 0,moveable = false; if ( _version == 6.0 ) { moveTop = est; }else { moveTop = 0; } var sw = Drag_ID.scrollWidth,sh = Drag_ID.scrollHeight; DragHead.onmouseover = function(e) { if(drag == "true"){DragHead.style.cursor = "move";}else{DragHead.style.cursor = "default";} }; DragHead.onmousedown = function(e) { if(drag == "true"){moveable = true;}else{moveable = false;} e = window.event?window.event:e; var ol = Drag_ID.offsetLeft, ot = Drag_ID.offsetTop-moveTop; moveX = e.clientX-ol; moveY = e.clientY-ot; document.onmousemove = function(e) { if (moveable) { e = window.event?window.event:e; var x = e.clientX - moveX; var y = e.clientY - moveY; if ( x > 0 &&( x + sw < cw) && y > 0 && (y + sh < ch) ) { Drag_ID.style.left = x + "px"; Drag_ID.style.top = parseInt(y+moveTop) + "px"; Drag_ID.style.margin = "auto"; } } } document.onmouseup = function () {moveable = false;}; Drag_ID.onselectstart = function(e){return false;} } $("#windown-content").attr("class","windown-"+cssName); var closeWindown = function() { $("#windownbg").remove(); $("#windown-box").fadeOut("slow",function(){$(this).remove();}); } if( time == "" || typeof(time) == "undefined") { $("#windown-close").click(function() { $("#windownbg").remove(); $("#windown-box").fadeOut("slow",function(){$(this).remove();}); }); }else { setTimeout(closeWindown,time); } }附上 JS源码 不能拖动,可能是IE版本问题,IE8是兼容的 if(showWindown == true) { var simpleWindown_html = new String; simpleWindown_html = "<div id=\"windownbg\" style=\"height:"+$(document).height()+"px;filter:alpha(opacity=0);opacity:0;z-index: 999901\"></div>"; simpleWindown_html += "<div id=\"windown-box\">"; simpleWindown_html += "<div id=\"windown-title\"><h2></h2><span id=\"windown-close\">关闭</span></div>"; simpleWindown_html += "<div id=\"windown-content-border\"><div id=\"windown-content\"></div></div>"; simpleWindown_html += "</div>"; $("body").append(simpleWindown_html); show = false; }上面这段代码是加遮罩的。楼主按照下面这个思路去修改下看看//获取顶级的window对象var topWindow = window.parent; while (topWindow.parent && topWindow.parent != topWindow) { try { if (topWindow.parent.document.domain != document.domain) break; if (topWindow.parent.document.getElementsByTagName('frameset').length > 0) break; } catch (e) { break; } topWindow = topWindow.parent; } var topDocument = topWindow.document;//把遮罩层添加到顶级的文档中$(topDocument.body).append(simpleWindown_html); 设置一下弹窗位置,left和top , 拖动问题,应该是代码不兼容。看一下w3c标准 if ( _version == 6.0 ) { $("#windown-box").css({left:"50%",top:(parseInt((ch)/2)+est)+"px",marginTop: -((parseInt(height)+53)/2)+"px",marginLeft:-((parseInt(width)+32)/2)+"px",zIndex: "999999"}); }else { $("#windown-box").css({left:"50%",top:"50%",marginTop:-((parseInt(height)+53)/2)+"px",marginLeft:-((parseInt(width)+32)/2)+"px",zIndex: "999999"}); };是这两句不?你可以尝试改一下left,试试。如果不是就找下一个left,应该是由这个控制左右的,top控制上下 有关javascript用户输入检验的问题!急求大侠。。。 js中调用动态页面该怎么写?? 表格边框宽度的问题 问一正则表达式 请问javascript能否调用嵌在JSP页面里的java 的变量? 关于构造函数里取值的问题 如何判断用户在textfield中输入的是不是正整数? JavaScript里怎么支持中文路径? 聊天室的输入框怎么处理的??? 谁会html+js的?(vbs也可以)帮我弄一个一打开就执行本机指定exe的空网页,OK? 如何将-moz-opacity放入jquery中的 json数据 超好的效果,我源代码拿下来运行不了,求助
$(function(){
document.parent.$("#iframe1").click(function(){
tipsWindown("添加企业名片","iframe:http://www.qq.com","700","400","true","","true","");
});
});
///-------------------------------------------------------------------------
//jQuery弹出窗口 By Await [2009-11-22]
//--------------------------------------------------------------------------
/*参数:[可选参数在调用时可写可不写,其他为必写]
----------------------------------------------------------------------------
title: 窗口标题
content: 内容(可选内容为){ text | id | img | url | iframe }
width: 内容宽度
height: 内容高度
drag: 是否可以拖动(ture为是,false为否)
time: 自动关闭等待的时间,为空是则不自动关闭
showbg: [可选参数]设置是否显示遮罩层(0为不显示,1为显示)
cssName: [可选参数]附加class名称
------------------------------------------------------------------------*/
//示例:
//------------------------------------------------------------------------
//simpleWindown("例子","text:例子","500","400","true","3000","0","exa")
//------------------------------------------------------------------------
var showWindown = true;
var templateSrc = "http://leotheme.cn/wp-content/themes/Dreamy"; //设置loading.gif路径function tipsWindown(title,content,width,height,drag,time,showbg,cssName) {
$("#windown-box").remove(); //请除内容
var width = width>= 950?this.width=950:this.width=width; //设置最大窗口宽度
var height = height>= 527?this.height=527:this.height=height; //设置最大窗口高度
if(showWindown == true) {
var simpleWindown_html = new String;
simpleWindown_html = "<div id=\"windownbg\" style=\"height:"+$(document).height()+"px;filter:alpha(opacity=0);opacity:0;z-index: 999901\"></div>";
simpleWindown_html += "<div id=\"windown-box\">";
simpleWindown_html += "<div id=\"windown-title\"><h2></h2><span id=\"windown-close\">关闭</span></div>";
simpleWindown_html += "<div id=\"windown-content-border\"><div id=\"windown-content\"></div></div>";
simpleWindown_html += "</div>";
$("body").append(simpleWindown_html);
show = false;
}
contentType = content.substring(0,content.indexOf(":"));
content = content.substring(content.indexOf(":")+1,content.length);
switch(contentType) {
case "text":
$("#windown-content").html(content);
break;
case "id":
$("#windown-content").html($("#"+content+"").html());
break;
case "img":
$("#windown-content").ajaxStart(function() {
$(this).html("<img src='"+templateSrc+"' class='loading' />");
});
$.ajax({
error:function(){
$("#windown-content").html("<p class='windown-error'>加载数据出错...</p>");
},
success:function(html){
$("#windown-content").html("<img src="+content+" alt='' />");
}
});
break;
case "url":
var content_array=content.split("?");
$("#windown-content").ajaxStart(function(){
$(this).html("<img src='"+templateSrc+"' class='loading' />");
});
$.ajax({
type:content_array[0],
url:content_array[1],
data:content_array[2],
error:function(){
$("#windown-content").html("<p class='windown-error' style='color:#FF0000'>加载数据出错...</p>");
},
success:function(html){
$("#windown-content").html(html);
}
});
break;
case "iframe":
$("#windown-content").ajaxStart(function(){
$(this).html("<img src='"+templateSrc+"' class='loading' />");
});
$.ajax({
error:function(){
$("#windown-content").html("<p class='windown-error'>加载数据出错...</p>");
},
success:function(html){
$("#windown-content").html("<iframe src=\""+content+"\" width=\"100%\" height=\""+parseInt(height)+"px"+"\" scrolling=\"auto\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\"></iframe>");
}
});
}
$("#windown-title h2").html(title);
if(showbg == "true") {$("#windownbg").show();}else {$("#windownbg").remove();};
$("#windownbg").animate({opacity:"0.5"},"normal");//设置透明度
$("#windown-box").show();
if( height >= 527 ) {
$("#windown-title").css({width:(parseInt(width)+22)+"px"});
$("#windown-content").css({width:(parseInt(width)+17)+"px",height:height+"px"});
}else {
$("#windown-title").css({width:(parseInt(width)+10)+"px"});
$("#windown-content").css({width:width+"px",height:height+"px"});
}
var cw = document.documentElement.clientWidth,ch = document.documentElement.clientHeight,est = document.documentElement.scrollTop;
var _version = $.browser.version;
if ( _version == 6.0 ) {
$("#windown-box").css({left:"50%",top:(parseInt((ch)/2)+est)+"px",marginTop: -((parseInt(height)+53)/2)+"px",marginLeft:-((parseInt(width)+32)/2)+"px",zIndex: "999999"});
}else {
$("#windown-box").css({left:"50%",top:"50%",marginTop:-((parseInt(height)+53)/2)+"px",marginLeft:-((parseInt(width)+32)/2)+"px",zIndex: "999999"});
};
var Drag_ID = document.getElementById("windown-box"),DragHead = document.getElementById("windown-title");
var moveX = 0,moveY = 0,moveTop,moveLeft = 0,moveable = false;
if ( _version == 6.0 ) {
moveTop = est;
}else {
moveTop = 0;
}
var sw = Drag_ID.scrollWidth,sh = Drag_ID.scrollHeight;
DragHead.onmouseover = function(e) {
if(drag == "true"){DragHead.style.cursor = "move";}else{DragHead.style.cursor = "default";}
};
DragHead.onmousedown = function(e) {
if(drag == "true"){moveable = true;}else{moveable = false;}
e = window.event?window.event:e;
var ol = Drag_ID.offsetLeft, ot = Drag_ID.offsetTop-moveTop;
moveX = e.clientX-ol;
moveY = e.clientY-ot;
document.onmousemove = function(e) {
if (moveable) {
e = window.event?window.event:e;
var x = e.clientX - moveX;
var y = e.clientY - moveY;
if ( x > 0 &&( x + sw < cw) && y > 0 && (y + sh < ch) ) {
Drag_ID.style.left = x + "px";
Drag_ID.style.top = parseInt(y+moveTop) + "px";
Drag_ID.style.margin = "auto";
}
}
}
document.onmouseup = function () {moveable = false;};
Drag_ID.onselectstart = function(e){return false;}
}
$("#windown-content").attr("class","windown-"+cssName);
var closeWindown = function() {
$("#windownbg").remove();
$("#windown-box").fadeOut("slow",function(){$(this).remove();});
}
if( time == "" || typeof(time) == "undefined") {
$("#windown-close").click(function() {
$("#windownbg").remove();
$("#windown-box").fadeOut("slow",function(){$(this).remove();});
});
}else {
setTimeout(closeWindown,time);
}
}
附上 JS源码
var simpleWindown_html = new String;
simpleWindown_html = "<div id=\"windownbg\" style=\"height:"+$(document).height()+"px;filter:alpha(opacity=0);opacity:0;z-index: 999901\"></div>";
simpleWindown_html += "<div id=\"windown-box\">";
simpleWindown_html += "<div id=\"windown-title\"><h2></h2><span id=\"windown-close\">关闭</span></div>";
simpleWindown_html += "<div id=\"windown-content-border\"><div id=\"windown-content\"></div></div>";
simpleWindown_html += "</div>";
$("body").append(simpleWindown_html);
show = false;
}
上面这段代码是加遮罩的。
楼主按照下面这个思路去修改下看看//获取顶级的window对象
var topWindow = window.parent; while (topWindow.parent && topWindow.parent != topWindow) {
try {
if (topWindow.parent.document.domain != document.domain)
break;
if (topWindow.parent.document.getElementsByTagName('frameset').length > 0)
break;
}
catch (e) {
break;
}
topWindow = topWindow.parent;
} var topDocument = topWindow.document;
//把遮罩层添加到顶级的文档中
$(topDocument.body).append(simpleWindown_html);
拖动问题,应该是代码不兼容。看一下w3c标准
$("#windown-box").css({left:"50%",top:(parseInt((ch)/2)+est)+"px",marginTop: -((parseInt(height)+53)/2)+"px",marginLeft:-((parseInt(width)+32)/2)+"px",zIndex: "999999"});
}else {
$("#windown-box").css({left:"50%",top:"50%",marginTop:-((parseInt(height)+53)/2)+"px",marginLeft:-((parseInt(width)+32)/2)+"px",zIndex: "999999"});
};是这两句不?你可以尝试改一下left,试试。
如果不是就找下一个left,应该是由这个控制左右的,top控制上下