jquery 弹出窗口问题

tabtab123 2010-02-21 04:22:48
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script src="./jq.js" ></script>
<script type="text/javascript">
$(document).ready(function()
{
$("p").click(function()
{
//对话框
var dialog=$("<div id=\"dialog\"><p id=\"givegift\"><span>赠送礼物</span></p><div id=\"diaform\"><form action=\"\" method=\"post\"><label>接收人:</label><input type=\"text\" size=\"30\" /><label>附言:</label><textarea rows=\"3\" cols=\"20\"></textarea></form><p><input type=\"submit\" value=\"确定\" /><input type=\"submit\" value=\"取消\" /></p></div></div></div>");
//背景层
var winbg=$("<div id=\"winbg\" style=display:block;height:"+$(document).height()+"px;background-color:#555;\"></div>");

$("body").append(winbg);
$("#winbg").css ({"z-index":"99","position":"absolute","top":"0","left":"0","width":"100%","opacity":"0.5"});
$("body").append(dialog);
});
});
</script>
<style type="text/css">
*{margin:0;padding:0}
#dialog{width:300px;height:280px;background-color:#eee;border:1px solid grey;position:absolute;top:50%;left:50%;z-index:100;}
#diahead{}
#givegift{
background:url(./giftbox.gif) no-repeat top left;
display:block;
margin:15px 0 0 25px;
line-height:42px;
}

#givegift span{
margin-left:55px;
font-size:23px;
font-weight:bold;
color:#076A9B;
display:block;
height:42px;
width:190px;
border-bottom:1px solid #999999;
}
#diaform{margin:15px 0 0 25px;}
#diaform label{display:block;font-size:17px;font-weight:bold;color:#076A9B;margin:5px 0 5px;}
#diaform p {padding:5px 0 0 132px;}
#diaform p input{margin-left:6px;}
</style>
</HEAD>

<BODY>

<p>click here</p>
</BODY>
</HTML>

在ff下可以弹出对话框,在ie6 7 8 下就不行。请教下这是哪里出问题了?谢谢
...全文
377 18 打赏 收藏 举报
写回复
18 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
tabtab123 2010-02-22
  • 打赏
  • 举报
回复
引用 15 楼 kk3k2005 的回复:
引用 10 楼 tabtab123 的回复:
引用 7 楼 wndsc 的回复:
什么问题哦  我看你拼的代码 我的VS都得重启  强人啊
-_-!
的确是多了拼了个div,ie下不显示...
另外请教一下,别的写法是怎么做的。我这样写肯定是不灵活而且笨重的。
非常感谢你了
别的写法是  预先就在页面中 有 你那生成的2个DIV  js只是控制 DIV的隐藏显示
从你的设计需求上来说 弹出层这样的界面元素内容可以不直接出现在代码中  代码只是控制指定的层显示隐藏,刷新内容。。。 这样以后要变换界面就方便了
带界面控制 还是MVC分开设计最灵活(不过实现复杂点)

非常感谢!
又明白了一些。
:-)
tabtab123 2010-02-22
  • 打赏
  • 举报
回复
引用 14 楼 c_tianren 的回复:
楼主,你用的是jquery几啊!

是jquery1.3.2
KK3K2005 2010-02-22
  • 打赏
  • 举报
回复
引用 10 楼 tabtab123 的回复:
引用 7 楼 wndsc 的回复:
什么问题哦  我看你拼的代码 我的VS都得重启  强人啊
-_-!
的确是多了拼了个div,ie下不显示...
另外请教一下,别的写法是怎么做的。我这样写肯定是不灵活而且笨重的。
非常感谢你了

别的写法是 预先就在页面中 有 你那生成的2个DIV js只是控制 DIV的隐藏显示
从你的设计需求上来说 弹出层这样的界面元素内容可以不直接出现在代码中 代码只是控制指定的层显示隐藏,刷新内容。。。 这样以后要变换界面就方便了
带界面控制 还是MVC分开设计最灵活(不过实现复杂点)
诸葛非卿 2010-02-21
  • 打赏
  • 举报
回复
楼主,你用的是jquery几啊!
tabtab123 2010-02-21
  • 打赏
  • 举报
回复
[Quote=引用 11 楼 wndsc 的回复:]
HTML code<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document</TITLE><scriptsrc="js/jquery-1.3.2.js"></script><scripttype="text/javascript">
$(document).ready(function()
{
$("#ppp").bind("click",function()
{var dialog="<div id=\"dialog\"><p id=\"givegift\"><span>赠送礼物</span></p><div id=\"diaform\"><form action=\"\" method=\"post\"><label>接收人:</label> <input type=\"text\" size=\"30\" /><label>附言:</label>"+" <textarea rows=\"3\" cols=\"20\"></textarea><p><input type=\"submit\" value=\"确定\" /><input type=\"submit\" value=\"取消\" /></p> </form></div></div>";
$("#winbg").after(dialog);
$("#winbg").show();
});
});</script><styletype="text/css">
*{margin:0;padding:0}
#dialog{width:300px;height:280px;background-color:#eee;border:1px solid grey;position:absolute;top:50%;left:50%;z-index:100;}
#givegift{
display:block;
margin:15px 0 0 25px;
line-height:42px;
height:50px;}
#givegift span{
margin-left:55px;
font-size:23px;
font-weight:bold;
color:#076A9B;
display:block;
height:42px;
width:190px;
border-bottom:1px solid #999999;}
#winbg{
display:none; z-index:99; position:absolute; top:0px; left:0px; width:100%;background-color:#555; height:705px;filter:alpha(opacity=30);opacity:0.3;}
#diaform{margin:15px 0 0 25px;}
#diaform label{display:block;font-size:17px;font-weight:bold;color:#076A9B;margin:5px 0 5px;}
#diaform p{padding:5px 0 0 132px;}
#diaform p input{margin-left:6px;}</style></HEAD><BODY><pid="ppp">click here</p><divid="winbg"></div></BODY></HTML>

看你的代码比较费劲  我在你的基础上改了改  正常了
[/Quote]
请教一下:
这种用js做弹出框效果都是这样拼接html代码吗?
var dialog="<div id=\"dialog\"><p id=\"givegift\"><span>赠送礼物</span></p><div id=\"diaform\"><form action=\"\" method=\"post\"><label>接收人:</label> <input type=\"text\" size=\"30\" /><label>附言:</label>"
+" <textarea rows=\"3\" cols=\"20\"></textarea><p><input type=\"submit\" value=\"确定\" /><input type=\"submit\" value=\"取消\" /></p> </form></div></div>";
还是有其他别的方法?
谢谢
tabtab123 2010-02-21
  • 打赏
  • 举报
回复
引用 11 楼 wndsc 的回复:
HTML code<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document</TITLE><scriptsrc="js/jquery-1.3.2.js"></script><scripttype="text/javascript">
$(document).ready(function()
{
$("#ppp").bind("click",function()
{var dialog="<div id=\"dialog\"><p id=\"givegift\"><span>赠送礼物</span></p><div id=\"diaform\"><form action=\"\" method=\"post\"><label>接收人:</label> <input type=\"text\" size=\"30\" /><label>附言:</label>"+" <textarea rows=\"3\" cols=\"20\"></textarea><p><input type=\"submit\" value=\"确定\" /><input type=\"submit\" value=\"取消\" /></p> </form></div></div>";
$("#winbg").after(dialog);
$("#winbg").show();
});
});</script><styletype="text/css">
*{margin:0;padding:0}
#dialog{width:300px;height:280px;background-color:#eee;border:1px solid grey;position:absolute;top:50%;left:50%;z-index:100;}
#givegift{
display:block;
margin:15px 0 0 25px;
line-height:42px;
height:50px;}
#givegift span{
margin-left:55px;
font-size:23px;
font-weight:bold;
color:#076A9B;
display:block;
height:42px;
width:190px;
border-bottom:1px solid #999999;}
#winbg{
display:none; z-index:99; position:absolute; top:0px; left:0px; width:100%;background-color:#555; height:705px;filter:alpha(opacity=30);opacity:0.3;}
#diaform{margin:15px 0 0 25px;}
#diaform label{display:block;font-size:17px;font-weight:bold;color:#076A9B;margin:5px 0 5px;}
#diaform p{padding:5px 0 0 132px;}
#diaform p input{margin-left:6px;}</style></HEAD><BODY><pid="ppp">click here</p><divid="winbg"></div></BODY></HTML>

看你的代码比较费劲  我在你的基础上改了改  正常了

非常感谢!
的确是精简了不少,而且还不用那些烦人的z-index了absolute了。
谢谢~
wndsc 2010-02-21
  • 打赏
  • 举报
回复
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script src="js/jquery-1.3.2.js" ></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#ppp").bind("click",function()
{
var dialog="<div id=\"dialog\"><p id=\"givegift\"><span>赠送礼物</span></p><div id=\"diaform\"><form action=\"\" method=\"post\"><label>接收人:</label> <input type=\"text\" size=\"30\" /><label>附言:</label>"
+" <textarea rows=\"3\" cols=\"20\"></textarea><p><input type=\"submit\" value=\"确定\" /><input type=\"submit\" value=\"取消\" /></p> </form></div></div>";
$("#winbg").after(dialog);
$("#winbg").show();
});
});
</script>
<style type="text/css">
*{margin:0;padding:0}
#dialog{width:300px;height:280px;background-color:#eee;border:1px solid grey;position:absolute;top:50%;left:50%;z-index:100; }
#givegift{
display:block;
margin:15px 0 0 25px;
line-height:42px;
height:50px;
}
#givegift span{
margin-left:55px;
font-size:23px;
font-weight:bold;
color:#076A9B;
display:block;
height:42px;
width:190px;
border-bottom:1px solid #999999;
}
#winbg{
display:none; z-index:99; position:absolute; top:0px; left:0px; width:100%;background-color:#555; height:705px;filter:alpha(opacity=30);opacity:0.3;
}
#diaform{margin:15px 0 0 25px;}
#diaform label{display:block;font-size:17px;font-weight:bold;color:#076A9B;margin:5px 0 5px;}
#diaform p {padding:5px 0 0 132px;}
#diaform p input{margin-left:6px;}
</style>
</HEAD>

<BODY>
<p id="ppp">click here</p>
<div id="winbg">
</div>

</BODY>
</HTML>



看你的代码比较费劲 我在你的基础上改了改 正常了
tabtab123 2010-02-21
  • 打赏
  • 举报
回复
引用 7 楼 wndsc 的回复:
什么问题哦  我看你拼的代码 我的VS都得重启  强人啊

-_-!
的确是多了拼了个div,ie下不显示...
另外请教一下,别的写法是怎么做的。我这样写肯定是不灵活而且笨重的。
非常感谢你了
wndsc 2010-02-21
  • 打赏
  • 举报
回复
多一个</DIV> 吧
wndsc 2010-02-21
  • 打赏
  • 举报
回复
dialog 没有问题?
wndsc 2010-02-21
  • 打赏
  • 举报
回复
什么问题哦 我看你拼的代码 我的VS都得重启 强人啊
tabtab123 2010-02-21
  • 打赏
  • 举报
回复
问题解决了.....
tabtab123 2010-02-21
  • 打赏
  • 举报
回复
没有人知道吗?
-------------------
回复内容太短了
回复内容太短了!
tabtab123 2010-02-21
  • 打赏
  • 举报
回复
引用 3 楼 wndsc 的回复:
O 呵呵  兼容问题还是比较好玩的

....
wndsc 2010-02-21
  • 打赏
  • 举报
回复
O 呵呵 兼容问题还是比较好玩的
tabtab123 2010-02-21
  • 打赏
  • 举报
回复
引用 1 楼 apollo_ts 的回复:
newwin = window.open("","_blank","left=200,top=200,width=350,height=200,status=0,toolbar=0,menubar=0,location=0,scrollbars=1,resizable=1",false);
newdoc = newwin.document;
newdoc.open();
newdoc.write(" <html> <head> <title>处理完成 </title> </head> <body> <center> <hr>")
newdoc.write("处理完成"+" <hr>");
newdoc.write(" <input type=button VALUE='关闭窗口' onclick='window.close()'>");
newdoc.write(' </center> </body> </html>');
newdoc.close();
如上方式试验一下看看!

不是要这种形式弹出框,想要的是这种形式的:
百度知道页面点击“登陆”之后弹出的那个登陆框页面。
APOLLO_TS 2010-02-21
  • 打赏
  • 举报
回复
newwin = window.open("","_blank","left=200,top=200,width=350,height=200,status=0,toolbar=0,menubar=0,location=0,scrollbars=1,resizable=1",false);
newdoc = newwin.document;
newdoc.open();
newdoc.write("<html><head><title>处理完成</title></head><body><center><hr>")
newdoc.write("处理完成"+"<hr>");
newdoc.write("<input type=button VALUE='关闭窗口' onclick='window.close()'>");
newdoc.write('</center></body></html>');
newdoc.close();
如上方式试验一下看看!
发帖
JavaScript

8.7w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2010-02-21 04:22
社区公告
暂无公告