输入对话框的实现

怎么能实现 象confrim那样的对话框 有“确定”和“取消“ 按钮（样式象confrim 但不是prompt） 不过在他们（“确定”和“取消“）上面有一个可输入内容的输入框  程序中可以用变量接受输入的内容 

解决方案 »

  1.   

    prompt()方法
    该对话框提示用户输入某些信息
    除OK按钮和Cancel按钮外，该对话框还有文本框，要求用户在此输入某些数据。
    该方法接受两个参数，即要显示给用户的文本和文本框中的默认文本（可以是空串）。
    例如：
    var sResult = prompt("name", "");
    if(sResult) alert("you are "+sResult);
    如果点击OK按钮，将文本框中的值作为函数值返回。如果点击Cancel按钮，返回null。
      

  2.   

    你自己模拟可以，但是要效果好的话就要下一番功夫，其实prompt就可以满足你的要求，
    不知道你为什么不用
      

  3.   

    HOHO,
    prompt的输入框好像是在下面吧!用showModalDialog可以实现.
    不过画面布局当然要你自己来做了.
    用法,google一下就可以了.
      

  4.   

    prompt可以设置大小吗 初始时候太大了 效果不是太好
      

  5.   

    一般用showModalDialog模拟
    index.html文件:
    <script>
    function hehe()
    {
        var name = "hehe";
        var result = window.showModalDialog("hehe2.html",name,"dialogLeft=100;dialogTop=150;dialogWidth=500px;dialogHeight=300px;status=no");
        var haha = document.getElementById("haha");
        haha.value = result;
    }
    </script>
    <body>
    <input type="button" value="Test" onclick="hehe();" />
    <input type="text" id="haha" />
    </body>
    hehe2.html文件:
    <script>
    function hehe()
    {
        var name = window.dialogArguments;
        var hehe = document.getElementById("hehe");
        hehe.value = name;
    }
    function haha()
    {
        window.returnValue = "haha";
    }
    window.onload=hehe;
    window.onunload=haha;
    </script>
    <body bgColor="#FF7788">
    <input type="text" id="hehe" />
    </body>
      

  6.   

    ShowModalDialog函数的功能：
    打开一个子窗口，并且可与父窗口相互传递数据，它与window.open的最大区别就在于由ShowModalDialog打开子窗口后，父窗口将不能操作。
    使用方法：
    vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])
    参数说明：
    sURL
    必选参数，类型：字符串。用来指定对话框要显示的文档的URL。
    vArguments
    可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
    sFeatures
    可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。
            dialogHeight 对话框高度，不小于１００px，ＩＥ４中dialogHeight 和 dialogWidth 默认的单位是em，而ＩＥ５中是px，为方便其见，在定义modal方式的对话框时，用px做单位。
    　　 dialogWidth: 对话框宽度。
    　　 dialogLeft: 距离桌面左的距离。
    　　 dialogTop: 离桌面上的距离。
    　　 center: {yes | no | 1 | 0 }：窗口是否居中，默认yes，但仍可以指定高度和宽度。
    　　 help: {yes | no | 1 | 0 }：是否显示帮助按钮，默认yes。
    　　 resizable: {yes | no | 1 | 0 } ［ＩＥ５＋］：是否可被改变大小。默认no。
    　　 status: {yes | no | 1 | 0 } ［IE5+］：是否显示状态栏。默认为yes[ Modeless]或no  [Modal]。
           scroll:{ yes | no | 1 | 0 | on | off }：指明对话框是否显示滚动条。默认为yes。
    参数传递方法：
    父窗口向子窗口传递参数采用ShowModalDialog的第2个参数即可，父窗口要获取子窗口传回的参数则可通过ShowModalDialog函数的返回值获取。
    子窗口获取父窗口参数的方法为采用子窗口window对象dialogArguments属性获取，例如：
    var a=window.dialogArguments;
    子窗口向父窗口返回参数采用window.returnValue属性，如：
    window.returnValue=1;
    window.close();
      

  7.   

    做个sample供你参考一下.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
            <title>Untitled Document</title>
        </head>
        <script language="JavaScript">
            function doSel(){
                var ret = showModalDialog("popup.html");
    if(ret.btn == 1)
                 document.getElementById("text1").value = ret.value;
                
            }
        </script>
        <body>
            <input type="text" id="text1" value=""><input type="button" value="select" onclick="doSel();">
        </body>
    </html>弹出窗口
    popup.html
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    </head>
    <script language="JavaScript">
    function doRet(btn){
    var retVal = {};
    retVal.btn = btn;
    retVal.value = document.getElementById("text1").value;
    window.returnValue = retVal;
    close();
    }

    </script>
    <body>
    please Input:<br>
    <input type="text" id="text1" value="">
    <br>
    <input type="button" value="ok" onclick="doRet(1);">
    <input type="button" value="cancel" onclick="doRet(0);">
    </body>
    </html>