window对象对话框的总结

最新推荐文章于 2021-12-12 15:32:07 发布

weixin_34224941

最新推荐文章于 2021-12-12 15:32:07 发布

阅读量151

点赞数

文章标签： javascript ViewUI

原文链接：http://blog.51cto.com/12284509/2055447

版权

alert();显示一条消息，等待用户关闭
confirm();显示一条消息，等待用户确定或取消
prompt();显示一条消息，等待用户输入字符串并且返回字符串
showmodaldialog()；
参数一：指定要打开的对话框的html页面的url
参数二：指定任意值，对象或者数组都可以，在对话框中用window.dialogArguments获取
参数三：包含以分号分割的键值对，设置对话框的大小及其他属性
dialogwidth;dialogheight;
resizable=yes 允许对话框改变窗口大小
等到该对话窗口关闭之后
window.returnValue属性的值就是该窗口关闭的返回值
这就要求对话框中的html必须包含确认按钮，需要的话调用 window.close()
案列说明如下：
test.html页面：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--
            作者：934666450@qq.com
            时间：2017-12-29
            描述：
            x,y,z如果不加单引号，就会报错，因为系统认为是未定义的变量
        -->
    <div id="test">
        <a href="javascript:showModalDialog('b.html',['进入3d绘图区域','x','y','z'],'dialogwidth:400px;dialogheight:300px;resizable:no')">打开对话框</a>
    </div>
    <script type="text/javascript">
        //showModalDialog("b.html",["进入3d绘图区域","x","y","z"],"dialogwidth:400px;dialogheight:300px;resizable:no");
    </script>
    </body>
</html>

b.html页面内容如下：

<form>
            <fieldset id="fields"></fieldset>
            <div style="text-align: center;">
                <button onclick="okay()">确认</button>
                <button onclick="window.close()">取消</button>
            </div>

            <script type="text/javascript">

                var args=window.dialogArguments;//依据你传过来的对象的不同而不同
                var text="<legend>"+args[0]+"</legend>";
                for (var i=1;i<args.length;i++)
                    //这里要注意理解单引号与双引号的作用
                    //注意对标签的反斜杠忘记了
                    text+="<label>"+args[i]+":<input id='f"+i+"' /></label><br>"
                    document.getElementById("fields").innerHTML=text;

                //设置取消按钮
                function cancel(){window.close();}
                function okay(){

                    window.returnValue=[];
                    for (var i =1;i<args.length;i++) {

                        window.returnValue[i-1]=document.getElementById("f"+i).value;
                        document.write(window.returnValue);
                        window.close();
                    }

                    print(window.returnValue);
                }
            </script>
        </form>

说明：这里的window.close()在实际的应用中调用会弹出新窗口，而不能直接关闭当前窗口，后来经测试，该方法只兼容IE8（不含IE8）以前的，所以在使用的过程中要注意兼容性的问题
点击链接showmodaldialog()方法介绍总结

转载于:https://blog.51cto.com/12284509/2055447

weixin_34224941

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
window对象对话框的总结

alert();显示一条消息，等待用户关闭confirm();显示一条消息，等待用户确定或取消prompt();显示一条消息，等待用户输入字符串并且返回字符串showmodaldialog()；参数一：指定要打开的对话框的html页面的url参数二：指定任意值，对象或者数组都可以，在对话框中用window.dialogArguments获取参数三：包含以分号分割的键值对，设置对话框的大小及其他属性...
复制链接

扫一扫