百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>JS教程> js 自定义对话框
分享文章到:

js 自定义对话框

发布时间:01/15 来源: 浏览: 关键词:

 

js 自定义对话框

test.htm
<html>
    <head>
        <script lanauage="javascript" src="MessageBox.js">
           </script>
        <link href="MessageBox.css" rel="stylesheet" type="text/css">
    </head>
    <body id="body">        
        <div id="div2" style="display:none">
            <table><tr><td>用户名:</td><td><input type="text"/></td></tr>
                <tr><td>密 码:</td><td><input type="text"/></td></tr>
            </table>  
        </div>
        <a href="#" >open</a>
        <a href="#" >open</a>
        
    </body>
</html>
MessageBox.css
#MessageBoxBackground{
                width:1024px;height:600px;
                background-color:#eeeeee;position:absolute;
                left:0px;top:0px;
                filter:alpha(opacity=70);
               
            }
            
            #MessageBox{
                width:400px;
                /* left:300px;
                height:150px;*/
               
                background-color:#eeeeee;
                z-index:10000;
                position:absolute;
                padding:0px;
                border-left:2px solid #ffffff;
                border-top:2px solid #ffffff;
                border-bottom:2px solid gray;
                border-right:2px solid gray;
            }
            #MessageBoxTop{
                background-color:#0066FF;
            }
            #MessageBoxTitle{
                font-size:14pt;
                font-family:"华文新魏";
                color:#dddddd;
            }
            #MessageBox_CloseButton{
                width:20px;
                height:20px;
   
               
            }
            #MessageBoxBody, #MessageBoxBody td{
                background-color:#eeeeee;
                height:100%;
                padding:4px;
               
                font-size:9pt;
               
            }
            #MessageBox_CloseButton a:link,#MessageBox_CloseButton a:visited{
                text-decoration:none;
     color:#CCCCCC;
            }
MessageBox.js
function $(strid){
                return document.getElementById(strid);
            }
            function MessageBox_createDivs(){
                document.write('<div id="MessageBox">');
                document.write('<div id="MessageBoxTop"><table width="100%"><tr><td> ');
                document.write(' <div id="MessageBoxTitle">提示:</div> ');
                document.write(' </td><td align="right"> ');
                document.write(' <div id="MessageBox_CloseButton"><a href=\"#\" onclick=\"MessageBox_hide();\" align=\"right\">×</a></div>');
                document.write(' </td></tr></table></div>');
                document.write('<div id="MessageBoxBody">示例内容,请调用相关方法!');
                document.write(" </div> ");
                document.write(" </div> ");
                document.write(" <div id=\"MessageBoxBackground\"> ");
                document.write(" </div> ");
            }
            function MessageBox_setSize(){
                // for(i=0;i<100;i++){ document.write("<br/>"); }
                var bg=document.getElementById("MessageBoxBackground");
                var scroll_top=document.body.scrollTop;
                var scroll_left=document.body.scrollLeft;
                var scroll_width=document.body.offsetWidth;
                var scroll_height=document.body.offsetHeight;
                bg.style.width=(scroll_width-0-scroll_left)+"px";
                bg.style.height=(scroll_height-0-scroll_top)+"px";
                $("MessageBoxBackground").style.display='none';
                $("MessageBox").style.display='none';
            }
            function MessageBox_init(){
                MessageBox_createDivs();
                MessageBox_setSize();
            }
            function MessageBox_show(){
                var scroll_top=document.body.scrollTop;
                var scroll_left=document.body.scrollLeft;
                var scroll_width=document.body.offsetWidth;
                var scroll_height=document.body.offsetHeight;
                var messageBox_width=document.getElementById('MessageBox').style.width;
                var messageBox_left=(scroll_width-400)/2;
                //alert(scroll_width+","+messageBox_width+"");
                document.getElementById('MessageBoxBackground').style.display='';
                document.getElementById('MessageBox').style.display='';
                $("MessageBox").style.left=messageBox_left+"px";
            }
            function MessageBox_hide(){
                document.getElementById('MessageBoxBackground').style.display='none';
                document.getElementById('MessageBox').style.display='none';
               
            }
            function MessageBox_setTitle(title){
                $("MessageBoxTitle").innerHTML=title;
            }
            function MessageBox_setBody(body){
                $("MessageBoxBody").innerHTML=body;
            }
            function MessageBox_addChild(strChild){
                var objChild=$(strChild);
                var obj=$("MessageBoxBody");
                obj.innerHTML=objChild.innerHTML;
                //obj.appendChild(objChild);
            }
            function MessageBox_showDialog(title,div_id){
                MessageBox_setTitle(title);
                MessageBox_addChild(div_id);
                MessageBox_show();
            }
            function MessageBox_showDialogText(title,message){
                MessageBox_setTitle(title);
                MessageBox_setBody(message);
                MessageBox_show();
            }
            MessageBox_init();
下面是一个一体化的:
MsgBack.htm
<html>
    <head>
        <style type="text/css">
            #MessageBoxBackground{
                width:1024px;height:600px;
                background-color:#eeeeee;position:absolute;
                left:0px;top:0px;
                filter:alpha(opacity=70);
               
            }
            
            #MessageBox{
                width:400px;
                /* left:300px;
                height:150px;*/
               
                background-color:#ffffff;
                z-index:10000;
                position:absolute;
                padding:0px;
                border-left:2px solid #ffffff;
                border-top:2px solid #ffffff;
                border-bottom:2px solid gray;
                border-right:2px solid gray;
            }
            #MessageBoxTop{
                background-color:#afcefd;
            }
            #MessageBoxTitle{
                font-size:14pt;
                font-family:"华文新魏";
                color:#af2f3f;
            }
            #MessageBox_CloseButton{
                width:20px;
                height:20px;
               
            }
            #MessageBoxBody, #MessageBoxBody td{
                background-color:#efcadf;
                height:100%;
                padding:4px;
               
                font-size:9pt;
               
            }
            #MessageBox_CloseButton a:link,#MessageBox_CloseButton a:visited{
                text-decoration:none;
            }
        </style>
        
        <script lanauage="javascript">
            function $(strid){
                return document.getElementById(strid);
            }
            function MessageBox_createDivs(){
                document.write('<div id="MessageBox">');
                document.write('<div id="MessageBoxTop"><table width="100%"><tr><td> ');
                document.write(' <div id="MessageBoxTitle">提示:</div> ');
                document.write(' </td><td align="right"> ');
                document.write(' <div id="MessageBox_CloseButton"><a href=\"#\" onclick=\"MessageBox_hide();\" align=\"right\">×</a></div>');
                document.write(' </td></tr></table></div>');
                document.write('<div id="MessageBoxBody">示例内容,请调用相关方法!');
                document.write(" </div> ");
                document.write(" </div> ");
                document.write(" <div id=\"MessageBoxBackground\"> ");
                document.write(" </div> ");
            }
            function MessageBox_setSize(){
                // for(i=0;i<100;i++){ document.write("<br/>"); }
                var bg=document.getElementById("MessageBoxBackground");
                var scroll_top=document.body.scrollTop;
                var scroll_left=document.body.scrollLeft;
                var scroll_width=document.body.offsetWidth;
                var scroll_height=document.body.offsetHeight;
                bg.style.width=(scroll_width-0-scroll_left)+"px";
                bg.style.height=(scroll_height-0-scroll_top)+"px";
                $("MessageBoxBackground").style.display='none';
                $("MessageBox").style.display='none';
            }
            function MessageBox_init(){
                MessageBox_createDivs();
                MessageBox_setSize();
            }
            function MessageBox_show(){
                var scroll_top=document.body.scrollTop;
                var scroll_left=document.body.scrollLeft;
                var scroll_width=document.body.offsetWidth;
                var scroll_height=document.body.offsetHeight;
                var messageBox_width=document.getElementById('MessageBox').style.width;
                var messageBox_left=(scroll_width-400)/2;
                //alert(scroll_width+","+messageBox_width+"");
                document.getElementById('MessageBoxBackground').style.display='';
                document.getElementById('MessageBox').style.display='';
                $("MessageBox").style.left=messageBox_left+"px";
            }
            function MessageBox_hide(){
                document.getElementById('MessageBoxBackground').style.display='none';
                document.getElementById('MessageBox').style.display='none';
               
            }
            function MessageBox_setTitle(title){
                $("MessageBoxTitle").innerHTML=title;
            }
            function MessageBox_setBody(body){
                $("MessageBoxBody").innerHTML=body;
            }
            function MessageBox_addChild(strChild){
                var objChild=$(strChild);
                var obj=$("MessageBoxBody");
                obj.innerHTML=objChild.innerHTML;
                //obj.appendChild(objChild);
            }
            function MessageBox_showDialog(title,div_id){
                MessageBox_setTitle(title);
                MessageBox_addChild(div_id);
                MessageBox_show();
            }
            function MessageBox_showDialogText(title,message){
                MessageBox_setTitle(title);
                MessageBox_setBody(message);
                MessageBox_show();
            }
            MessageBox_init();
        </script>
        
    </head>
    <body id="body">        
        
        
        <div id="div2" style="display:none">
            <table><tr><td>用户名:</td><td><input type="text"/></td></tr>
                <tr><td>密码:</td><td><input type="text"/></td></tr>
            </table>
            
        </div>
        <a href="#" >open</a>
        <a href="#" >open</a>
        
    </body>
</html>

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有7人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板