js 自定义对话框

 

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>

时间： 2024-08-02 10:43:00

js 自定义对话框的相关文章

从零学React Native之04自定义对话框

之前我们介绍了RN相关的知识: 是时候了解React Native了 从零学React Native之01创建第一个程序 从零学React Native之02状态机 从零学React Native之03页面导航 本篇主要介绍: 1. 自定义组件 2. Alert 对话框 自定义对话框 之前的我都是利用React Native提供的基础组件对它们进行排列组合, 其实自定义也很简单, 我们还是拿上一篇文章的例子进行扩展. 当我们点击注册的时候,可以弹出一个对话框,让用户确认一下,如下图: 接下来就来

js自定义回调函数_javascript技巧

背景分析 首先看一段js的代码,主要实现添加的时候首先通过异步请求判断是否存在,如果不存在的话,在进行添加操作: function add(url,data) { var isExited = isExited(data); if(!isExited){ addRequest(url, data); } } 当我添加一个数据的时候,我首先通过判断是否在数据库中存在(当然,如果前后台彻底分离的话,不应该前端进行业务逻辑的判断,前端只应该,用来展示数据),首先,isExited()的请求是ajax请

用JQuery 实现的自定义对话框_jquery

JavaScript为我们提供几种对话框功能,但功能都十分有限:虽然在IE下可以通过模式窗体的方式创建更丰富的对话框功能,但毕竟只有IE得到支持.为了得到更丰富的自定义对话框功能,于是用JQuery编写了一个对话框插件:只需简单地引用相关JavaScript就能得到丰富的自定义对话框功能. 插件功能特点:        允许通过CSS进行外观控制.        可以任意把面页的元素作为对话框显示.        当对话框激活时,对话框外的任何元素不能接受鼠标操作.        对话框可以在工

JQuery实现自定义对话框的代码_jquery

为了得到更丰富的自定义对话框功能,于是用JQuery编写了一个对话框插件:只需简单地引用相关JavaScript就能得到丰富的自定义对话框功能. 插件功能特点: 允许通过CSS进行外观控制. 可以任意把面页的元素作为对话框显示. 当对话框激活时,对话框外的任何元素不能接受鼠标操作. 对话框可以在工作区范围内任意移动,根据工作区大小自适应居中功能. 并不需要编写复杂的JavaScript,通过简单HTML属性描述即可. 经过测试插件可以在Firefox和IE下正常工作. 简单使用描述: 引用JQu

Android简明开发教程十八：自定义对话框Transform

Android自带的AlertDialog,ProgressDialog,DatePickerDialog,TimePickerDialog 可以用于简单的对话框显示.当还是有 这些对话框不能满足应用需要的时候,这时就可以使用一些自定 义的对话框.有多种方法可以实现自定义对话框.一是使用Activity作为Dialog,可以通过设置Activity显示Dialog风格,使得 该Activity在外观上和Dialog一致:显示在其它Activity前面 且半透明. <Activity androi

JS自定义对象实现Java中Map对象功能的方法

这篇文章主要介绍了JS自定义对象实现Java中Map对象功能的方法,可实现类似Java中Map对象增删改查等功能,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了JS自定义对象实现Java中Map对象功能的方法.分享给大家供大家参考.具体分析如下: Java中有集合,Map等对象存储工具类,这些对象使用简易,但是在JavaScript中,你只能使用Array对象. 这里我创建一个自定义对象,这个对象内包含一个数组来存储数据,数据对象是一个Key,可以实际存储的内容! 这里Key

Android使用setCustomTitle()方法自定义对话框标题_Android

Android有自带的对话框标题,但是不太美观,如果要给弹出的对话框设置一个自定义的标题,使用AlertDialog.Builder的setCustomTitle()方法. 运行效果如下,左边是点击第一个按钮,弹出Android系统自带的对话框(直接用setTitle()设置标题):右边是点击第二个按钮,首先inflate一个View,然后用setCustomTitle()方法把该View设置成对话框的标题. 定义一个对话框标题的title.xml文件: <?xml version="1.

实用ExtJS教程100例-005：自定义对话框Ext.MessageBox.show

我们对ExtJS对话框进行了三篇演示: MessageBox的三种用法 进度条对话框Ext.MessageBox.progress 等待对话框Ext.MessageBox.wait 通过上面三篇内容的演示,相信你已经基本上了解了ExtJS的基本样式,这篇文章将演示如何使用自定义ExtJS对话框. Ext.MessageBox.show演示 要显示自定义的对话框,我们需要用到Ext.MessageBox.show方法.先来看一个简单的例子: Ext.get("btn1").on(&quo

android中怎么实现一个自定义对话框

问题描述 android中怎么实现一个自定义对话框 android界面中,单击EditText弹出一个时间对话框, 解决方案 1.可以自定义对话框的布局 2.新建一个activity 设置android:theme="@style/mydialog" parent="@android:style/Theme.Dialog" ><br> <item name="android:windowNoTitle">true&l