十分钟年华老去

倒数时日，焦躁空下。

导航

JS中showModalDialog 的使用

Posted on 2013-04-17 21:06  CN.programmer.Luxw  阅读(202)  评论(0)    收藏  举报

基本介绍：          

window.showModalDialog()         方法用来创建一个显示HTML内容的模态对话框。(就是打开后不能操作父窗口,只能等模式　　 　　                                 窗口关闭时才能操作)          

window.showModelessDialog()        方法用来创建一个显示HTML内容的非模态对话框。(就是打开后仍然可以进行其他的操作)　 　　                                                                              

使用方法：          

vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])          

vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])

参数说明：         

sURL          --  必选参数，类型：字符串。用来指定对话框要显示的文档的URL。         

vArguments    -- 可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过  　　  　　                 window.dialogArguments来取得传递进来的参数。         

sFeatures     -- 可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。

-------------------------------

参数传递：
1. 要想对话框传递参数，是通过vArguments来进行传递的。类型不限制，对于字符串类型，最大为4096个字符。也可以传递对象.
parent.html


<body>
        用户名：
        <input id="usernameID" type="text" readonly/>
        <input id="buttonID" type="button" value="选择输入" />
        <script type="text/javascript">
            var sURL = "showModalDialog2.html";
            //将父窗口对象传给子窗口
            var vArguments = window;
            var sFeatures = "dialogHeight:200px;dialogWidth:450px";
            document.getElementById("buttonID").onclick = function(){
                //单击"选择输入"按钮，弹出对话框以供选择输入
                window.showModalDialog(sURL,vArguments,sFeatures);
            }
        </script>
  </body>

children.html


<body>
        <script type="text/javascript">
              //单击"选择输入"按钮后，会将对应的值显示在父窗口文本框中
              //接收父窗口传过来的对象
              var fatherWindow = window.dialogArguments;
              function selectInput(inputElement){
                  //取得用户名
                  var username = inputElement.parentNode.nextSibling.firstChild.nodeValue;
                  //将用户名设置到父窗口相关的位置
                  fatherWindow.document.getElementById("usernameID").value = username; 
              }
              
          </script>
        <table border="1" align="center">
            <tr>
                <th>
                    操作
                </th>
                <th>
                    用户名
                </th>
            </tr>
            <tr>
                <td>
                    <input type="button" value="选择输入" onclick="selectInput(this)" />
                </td>
                <td>
                    张三
                </td>
            </tr>
            
        </table>
    </body>
最终结果：

2.可以通过window.returnValue向打开对话框的窗口返回信息,可以是布尔值,整型值等以外还可以是个js数组,当然也可以是对象.

 parent.html

<script type="text/javascript">
/**
*通过controller转向在模拟窗口加载JSP页面
**/
    function selectUserList(param) {
         var sURL = "${pageContext.request.contextPath}/SelectUserController/selUser.do?checkTip="+param.checkType+"&regField="+param.regField";
         var vArguments = window;
         var sFeatures = "scrollbars=no;resizable=no;help=no;status=no;center:yes;dialogHeight=580px;dialogWidth=776px"";
         return window.showModalDialog(sURL,vArguments,sFeatures);
            
    }


/**
*通过JSON传值,并返回JSON数组
**/
    function getUser(){
        var retValue = selectUserList({'checkType':'','regField':'more'});
</script>

说明：通过调用getUser()来打开模型窗口.

children.html

 

<script type="text/javascript">
function toGetResult(){
    var oo = $("#selected").find('input[name="resDv"]');
    var array = [];
    if(oo != null){
        var len = oo.length;
        for(var i=0;i<len;i++){
            array.push(oo.eq(i).val().toString());
        }
    }                        
    window.returnValue  =  eval('['+array.join(',')+']');
    window.close();
}
</script>
<body>
        <div id="#selected">
            <input name="resDv" type="hidden" value="{'id':'18','name':'张三','phone':'1234567'}" />
            <input name="resDv" type="hidden" value="{'id':'19','name':'李四','phone':'7654321'}" />
        </div>
</body>

说明：通过调用toGetResult()返回JSON对象数组