zoukankan      html  css  js  c++  java
  • showModalDialog模态对话框的使用

    基本介绍:
             showModalDialog() (IE 4+ 支持)
             showModelessDialog() (IE 5+ 支持)
             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. dialogHeight: 对话框高度,不小于100px
    2. dialogWidth: 对话框宽度
    3. dialogLeft: 离屏幕左的距离
    4. dialogTop: 离屏幕上的距离
    5. center: { yes | no | 1 | 0 } : 是否居中,默认yes,但仍可以指定高度和宽度
    6. help: {yes | no | 1 | 0 }: 是否显示帮助按钮,默认yes
    7. resizable: {yes | no | 1 | 0 } [IE5+]: 是否可被改变大小。默认no
    8. status: {yes | no | 1 | 0 } [IE5+]: 是否显示状态栏。默认为yes[ Modeless]或no[Modal]
    9. scroll: {yes | no | 1 | 0 | on | off }: 是否显示滚动条。默认为yes
    --下面几个属性是用在HTA(HTML Application)中的,在一般的网页中一般不使用
    10. dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no
    11. edge:{ sunken | raised }:指明对话框的边框样式。默认为raised
    12. unadorned:{ yes | no | 1 | 0 | on | off }:默认为no

    基本用法:

    1、传递参数(通过vArguments来进行传递的,类型不限制,对于字符串类型,最大为4096个字符,也可以传递对象)

    2、返回参数(通过window.returnValue向打开对话框的窗口返回信息,可以为字符串数值或对象)

    父文件(parent.html):

    <script language ="JavaScript">
    <!--
        function testModal(){
            var obj = new Object();
            obj.name="sky";
            var returnStr = window.showModalDialog("modal.html",obj,"dialogWidth=580px;dialogHeight=300px");
            if(returnStr=="close"){
                 //TODO  reload the part of price
            }
        }              
    -->
    </script>

    子文件(modal.html):

    <script language ="JavaScript">
    <!--
        var obj = window.dialogArguments;
        alert("name is :" + obj.name);
        function closeModal(){
          window.returnValue="close";
          window.close();
        }
    -->
    </script>

    3、在IE的modal窗口操作数据经过服务器传到页面会打开新的页面,而不是原来的modal窗口,解决办法如下

    parent.jsp

    <script language ="JavaScript">
    <!--
        function doPriceModify(dealKbn,revDt){
          var partId = $("#partId").val();
          var url = "PartModify?partId="+partId;
          var winReturn = window.showModalDialog(url,"PartModify","dialogWidth:850px;dialogHeight:500px");
          if(winReturn=="close"){
            
          }
    }
    -->
    </script>

    PartAction.java

    @Namespace("/")
    @ParentPackage("struts-default")
    @Results( { @Result(name = "success", location = "/WEB-INF/view/modalFrame.jsp")
               ,@Result(name = "login", location = "/WEB-INF/view/modal.jsp")})
    public class PartAction extends ActionSupport {
    
        private static final long serialVersionUID = 1L;
        private String partId;
        
        @Action("partModify")
        public String partModify() throws Exception {
            return SUCCESS;
        }
        
        @Action("showPart")
        public String showPart() throws Exception {
            return LOGIN;
        }
    
        public String getPartId() {
            return partId;
        }
        public void setPersons(String partId) {
            this.partId = partId;
        }
    
    }

    modalFrame.jsp

    <!doctype html>
    <html>
    <head>
    <title>partModify</title>
    <meta http-equiv=Content-Type content="text/html; charset=utf-8">
    <meta http-equiv=Content-Style-Type content=text/css>
    </head>
    <frameset rows="100%">
    <frame src="showPart?partId=${partId}" name="partModify" scrolling="auto" noresize>
    </frameset>
    </html>

    modal.jsp

    <!doctype html>
    <html>
    <head>
    <title>partModify</title>
    <meta http-equiv=Content-Type content="text/html; charset=utf-8">
    <meta http-equiv=Content-Style-Type content=text/css>
    <script language ="JavaScript">
    <!--
        function closeModal(){
          window.returnValue="close";
          window.close();
        }
    -->
    </script>
    </head>
    <body>
    <form action="modify" method="post" target="partModify">
    </form>
    </body>
    </html>
  • 相关阅读:
    linux运维学习
    2017年阿里巴巴三面经验
    Spring Boot:在Spring Boot中使用Mysql和JPA
    meshroom和alicevision在Ubuntu16上的安装过程
    ubuntu rm -rf ntfs 硬盘恢复
    python 脚本内部修改 LD_LIBRARY_PATH
    python uml 图
    tlmgr 相关
    ubuntu 安装 clangd 10.0.0
    zsh 快捷键
  • 原文地址:https://www.cnblogs.com/tombsky/p/3912579.html
Copyright © 2011-2022 走看看