87,984
社区成员
发帖
与我相关
我的任务
分享jquery 弹出窗口问题
<!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 下就不行。请教下这是哪里出问题了？谢谢
...全文
请发表友善的回复…
发表回复
tabtab123 2010-02-22
- 打赏
- 举报
非常感谢！
又明白了一些。
:-)
tabtab123 2010-02-22
- 打赏
- 举报
是jquery1.3.2
KK3K2005 2010-02-22
- 打赏
- 举报
别的写法是 预先就在页面中 有 你那生成的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
- 打赏
- 举报
非常感谢！
的确是精简了不少，而且还不用那些烦人的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
- 打赏
- 举报
-_-!
的确是多了拼了个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
- 打赏
- 举报
....
wndsc 2010-02-21
- 打赏
- 举报
O 呵呵 兼容问题还是比较好玩的
tabtab123 2010-02-21
- 打赏
- 举报
不是要这种形式弹出框，想要的是这种形式的：
百度知道页面点击“登陆”之后弹出的那个登陆框页面。
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();
如上方式试验一下看看！
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();
如上方式试验一下看看！
