问一个关于自定义对话框的问题。

很多的网站想网易，google都有自己特有对话框，做的很漂亮。一直很想做一个，在网上找了好久的资料都没线索。有哪为高人做过的，请不吝赐教。谢谢。

解决方案 »

  1.   

    网上还是有的，div＋css＋js做的
    我刚搜的一个<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gbk"/><title>弹出模态对话框测试[IE6下测试通过]</title><style type="text/css">    .hideDlg    {        height:129px;width:368px;        display:none;    }    .showDlg    {        background-color:#ffffdd;        border-width:3px;        border-style:solid;        height:129px;width:368px;        position: absolute;         align:center;        z-index:5;    }    .showDeck {        display:block;        top:0px;        left:0px;        margin:0px;        padding:0px;        width:100%;        height:100%;        position:absolute;        z-index:3;        background:#cccccc;        filter:"alpha(opacity=80)";        opacity:"80/100";        MozOpacity:"80/100";    }    .hideDeck {        display:none;    }}</style><script type="text/javascript">    function showDlg()    {        //显示遮盖的层        var objDeck = document.getElementById("deck");        if(!objDeck)        {            objDeck = document.createElement("div");            objDeck.id="deck";            document.body.appendChild(objDeck);        }        objDeck.className="showDeck";        //显示遮盖的层end                //禁用select        hideOrShowSelect(true);                //显示对话框        var w=368;        var h=129;        var dde=document.documentElement;        var obox=document.getElementById('divBox');                obox.style.left=dde.scrollLeft+(dde.offsetWidth-w)/2 +"px";        obox.style.top=dde.scrollTop+(dde.offsetHeight-h)/2 +"px";        document.getElementById('divBox').className='showDlg';        //显示对话框end    }        function cancel()    {        document.getElementById('divBox').className='hideDlg';        document.getElementById("deck").className="hideDeck";        hideOrShowSelect(false);    }        function hideOrShowSelect(v)    {        var allselect = document.getElementsByTagName("select");        for (var i=0; i<allselect.length; i++)        {            //allselect[i].style.visibility = (v==true)?"hidden":"visible";            allselect[i].disabled =(v==true)?"disabled":"";        }    }    function resize()    {        //调整位置        var w=368;        var h=129;        var dde=document.documentElement;        var obox=document.getElementById('divBox');                if (obox.style.display !="none")        {            obox.style.left=dde.scrollLeft+(dde.offsetWidth-w)/2 +"px";            obox.style.top=dde.scrollTop+(dde.offsetHeight-h)/2 +"px";        }    }</script></head><body onresize="resize();">    <input type="button" value="click me" onclick="showDlg();" size="10px" /><br/>    <div id="divBox" class="hideDlg" style="" >            <table width="100%" style="height:100%; width: 100%;" id="table1">                    <tr>                        <td style="height: 20px; text-align: center;" colspan="3">请输入用户名及密码</td>                    </tr>                    <tr>                        <td>用户名</td>                        <td>                            <input name="TextBox1" type="text" id="TextBox1" />                        </td>                        <td></td>                    </tr>                    <tr>                        <td>密码</td>                        <td>                            <input name="TextBox2" type="text" id="TextBox2" /></td>                        <td></td>                    </tr>                    <tr>                        <td></td>                        <td>                            <input type="button" name="Button1" value="Login" id="Button1" size="10" onclick="alert(TextBox1.value)"/>&nbsp;&nbsp;                            <input type="button" name="Button2" value="Cancel" id="Button2" size="10" onclick="cancel();" />                            </td>                        <td>&nbsp;</td>                    </tr>            </table>    </div></body></html>