谁有做过DIV+CSS弹出框 给段完整的代码吧，谢谢了！

谁有做过DIV+CSS弹出框 给段完整的代码吧 已经老是用window.showModalDialog 样子很是难看，我想换成DIV+CSS的
我要的不是单纯的对话框 要在上面放控件 有提交按钮类似做个这方面的请贴个出来吧 谢谢了！！！！

解决方案 »

  1.   


    <!-- saved from url=file://C:/Documents and Settings/yfq/桌面/a.html -->
    <script>
    window.onerror = new Function("return(false);")
    </script><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML style="OVERFLOW-Y: auto; OVERFLOW-X: hidden; OVERFLOW: hidden"><HEAD>
    <STYLE>
     /* container */
     body {margin:0; padding:0; text-align:center; font-family:Verdana,"宋体"; font-size:12px; color:#333;}
     form,ul,ol,li,dl,dt,dd {margin:0; padding:0;}
     div{text-align:center; margin:0 auto; padding:0;}
     input{color:#333; font-size:12px; font-family:Arial;}
     ul,li{list-style:none;}
     img,a img {border-width:0;}
     /* opennav */
     .navigator_bg{position:absolute; width:100%; height:1000px; background-color:#234f74; filter:alpha(opacity=40); -moz-opacity:0.4;}
     #navigator, #xyeva{position:absolute; width:459px; height:281px; background-color:#fff; margin-left:-231px; padding:0px; z-index:99; top:100px; left:50%;}
     /*.tabborder {float:left; width:462px; height:285px;} */
     .tab {float:left; width:457px; height:279px; border: 1px solid #A5E3ED;} 
     .tabtitle{width:455px; height:28px; border:1px solid #FFF; background:url(http://www.cnblogs.com/images/cnblogs_com/amwggyy504/TabTitleBg.jpg) repeat-x left top; color:#0079BC; font-size:14px; line-height:28px;}
     .tabtitle img{float:right; margin:7px 10px 0 0;}
     .tabcontent{width:457px; height:248px; border-top:1px solid #A5E3ED; background:url(http://www.cnblogs.com/images/cnblogs_com/amwggyy504/TabContentBg.jpg) no-repeat left top;}
     .tabcontent ul{padding:20px 0; width:417px; margin-left:20px; *margin-left:0px; border-bottom:1px dotted #0079BC; text-align:left; line-height:20px; color:#0079BC;}
     .tabcontent li{padding:0 10px;}
     .tabcontent input{margin:0px 5px;}
     </STYLE>
    </HEAD><BODY><!--StartFragment--><A onclick=openEva(); href="#">弹出</A>
    <SCRIPT language=javascript>
     function openEva(){
     var nav = new Navigator();
     nav.createWin();
     }
     var preObjects = null;
     var Navigator = function(id){
             this.id = id;
     };
     Navigator.initIndex = 0;
     Navigator.CONTAINER = "navigator";
     Navigator.prototype.createWin = function(){
             Mark.showHintDiv();
             var html = "";
             var container = document.createElement("DIV");
             container.id = Navigator.CONTAINER;
             html += "<div class='tabborder'>"
             html += "        <div class='tab'>"
             html += "                <div class='tabtitle'><ul><li style='float:left; padding-left:183px;'><strong>弹出框</strong></li><li style='float:right; width:20px;'><a href='javascript:Mark.close();'><img src='TabTitleClose.jpg'></img></a></ul></div>"
             html += "                        <div class='tabcontent'>"
             html += "                                <ul><li>自定义显示的内容</li></ul>"
             html += "                                <ul><li>自定义显示的内容</li></ul>"
             html += "                        </div>"
             html += "                </div>"
             html += "</div>"
             container.innerHTML = html;
             document.body.appendChild(container);
     }
     /* 生成页面遮盖的方法 */
     function gernateDivBg(){
             var bg = document.createElement("DIV");
             document.documentElement.style.overflow = "hidden";
             with(bg.style){
                     position = "absolute";
                     top = "0px";
                     left = "0px";
                     width = document.documentElement.scrollWidth;
                     height = document.documentElement.scrollHeight;
             }
             return bg;
     };
     var Mark = new Object();
     Mark.showHintDiv = function(){
             var bg = gernateDivBg();
                     bg.id = Mark.id;
                     bg.className = "navigator_bg";
     
             document.body.appendChild(bg);
     }
     Mark.close = function(){
             if(document.getElementById(Mark.id)){
                     document.body.removeChild(document.getElementById(Mark.id));
             }        
             if(document.getElementById(Navigator.CONTAINER))
                     document.body.removeChild(document.getElementById(Navigator.CONTAINER));
             document.documentElement.style.overflowX= "hidden";
             document.documentElement.style.overflowY= "auto";
     };
     </SCRIPT>
     <!--EndFragment--></BODY>
    </HTML>
      

  2.   

    jquery里好像有这样的功能，查下
      

  3.   

    /* CSS Document */
    body{font-family:Verdana, Arial, Helvetica, sans-serif; text-align:center; margin:0; background:url(../images/bodyTop.gif) repeat-x top; padding-top:1em; color:#333;}
    div{font-size:12px;
    height: 937px;
    width: 939px;
    }
    table{font-size:12px;
    margin-right: 0px;
    }
    td{padding:3px; line-height:16px;}
    a:link{color:#03c; text-decoration:none; font-size:12px;}
    a:visited{color:#03c; text-decoration:none; font-size:12px;}
    a:hover{color:#f60; text-decoration:underline; font-size:12px;}
    /*underside is header*/
    #header{width:956px; 
    margin:0 auto 0 0px;
    }
    #header #logo{width:400px; float:left; height:56px; margin-top:14px; padding-bottom:6px;}
    #header #sitemap{width:376px; 
    float:right; height:20px; padding-top:6; text-align:right;
    }
    #header #sitemap a.map:link, a.map:visited{color:#333; text-decoration:none; font-size:12px;}
    #header #sitemap a.map:hover {color:#f60; text-decoration:underline; font-size:12px;}
    #header #sitemap a.red:link, a.red:visited{color:#f00; text-decoration:none; font-weight:bold; font-size:12px;}
    #header #sitemap a.red:hover{color:#f00; text-decoration:underline; font-size:12px;}
    .marR2em{margin-right:2em;}
      

  4.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>无标题页</title>
       <style type="text/css">
       #dialog1
    {
    position: absolute;
    top: 0px;
    left: 0pt;
    width: 100%;
    height: 100%;
    background-color: Black;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    text-align: center;
     display:none;
    }
    #dialog2
    {
    border: 1px solid rgb(51, 102, 153);
    background: white;
    position: absolute;
    width: 100px;
    height: 100px;
    top: 135px;
    left: 232px;
    display:none;
    }
       </style> 
       <script>
       function show()
       {
       document.getElementById("dialog1").style.display="block";
         document.getElementById("dialog2").style.display="block";
       }
          function hide()
       {
       document.getElementById("dialog1").style.display="none";
         document.getElementById("dialog2").style.display="none";
       }
       </script>
    </head>
    <body>
        <input id="Button1" type="button"  value="弹出" onclick="show()" />
            <div id="dialog1">
            </div>
            <div  id="dialog2" align="center" >
                <input id="btnconfirm" type="button" value="确定" onclick="hide()" />
      </div>
    </body>
    </html>