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 下就不行。请教下这是哪里出问题了？谢谢

解决方案 »

  1.   

    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();
    如上方式试验一下看看！
      

  2.   

    -_-!
    的确是多了拼了个div，ie下不显示...
    另外请教一下，别的写法是怎么做的。我这样写肯定是不灵活而且笨重的。
    非常感谢你了
      

  3.   

    <!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>看你的代码比较费劲  我在你的基础上改了改  正常了
      

  4.   

    非常感谢！
    的确是精简了不少，而且还不用那些烦人的z-index了absolute了。
    谢谢~
      

  5.   

    请教一下：
    这种用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>";
    还是有其他别的方法？
    谢谢
      

  6.   

    别的写法是  预先就在页面中 有 你那生成的2个DIV  js只是控制 DIV的隐藏显示
    从你的设计需求上来说 弹出层这样的界面元素内容可以不直接出现在代码中  代码只是控制指定的层显示隐藏，刷新内容 这样以后要变换界面就方便了 
    带界面控制 还是MVC分开设计最灵活（不过实现复杂点）