jqueryの使用例を詳しく解説 showModelDialog_jquery

2 日前に、ユーザーが添付ファイルをアップロードするときに、ユーザーがアップロードした添付ファイル内の ID カード情報を確認する必要があり、エラー情報がある場合は、すべてのエラー情報を表示する必要があるというタスクを受け取りました。
この要件に対して私が最初に検討したのは、jQuery Dialog を使用することでした。ただし、このプロジェクトでは showModelDialog が使用されておらず、showModelDialog が使用されていることがわかりました。そのため、統一のために showModelDialog も使用する必要があります。

window.showModalDialog() メソッドは、HTML コンテンツを表示するモーダル ダイアログ ボックスを作成するために使用されます。これはダイアログ ボックスであるため、通常 window.open( で開かれるウィンドウのプロパティのすべてを備えているわけではありません。 ）。
使用法:
varreturnValue = window.showModalDialog(URL [, argument] [, features])
パラメータの説明:
URL: 必須パラメータ: ダイアログ ボックスに表示するドキュメントを指定するために使用されますURL。
arguments: オプションのパラメータ。パラメータをダイアログ ボックスに渡すために使用されます。渡されるパラメータのタイプは、配列などを含めて制限されません。ダイアログ ボックスは、window.dialogArguments を通じて渡されたパラメータを取得します。
にはオプションのパラメータがあります。ダイアログ ボックスの外観やその他の情報を記述するために使用され、次の 1 つ以上をセミコロン「;」で区切って使用できます。
dialogHeight ダイアログ ボックスの高さ、100 ピクセル以上。
dialogWidth: ダイアログの幅。
dialogLeft: デスクトップの左側からの距離。
dialogTop: デスクトップからの距離。
center: {yes| no | 1 | 0}: ウィンドウが中央に配置されるかどうか、デフォルトは yes ですが、高さと幅は指定できます。ヘルプ: {はい | いいえ | 0}: ヘルプ ボタンを表示するかどうか。デフォルトははいです。 resizable: {はい | いいえ | 0} [ie5+]: サイズを変更できるかどうか。デフォルトは「いいえ」です。ステータス: {はい | いいえ | 0} [IE5]: ステータス バーを表示するかどうか。デフォルトは、yes[Modal] または no[Modal] です。スクロール:{ はい | いいえ | 0 | オン オフ }: ダイアログ ボックスにスクロール バーを表示するかどうかを示します。デフォルトは「はい」です。
例:

コードをコピー コードは次のとおりです。

var rv = window.showModalDialog("< ;%= path%>/query/query_showErrorInfo.action","","dialogWidth=600px;dialogHeight=" 高さ "px;dialogLeft=400px;dialogTop=200px;center=no;resizable=no");

高さ: ディスプレイの数に基づいて制御されます。
url: これはアクションであり、このアクションのユーザーはすべて間違った個人情報を取得します。同時に、errorInfo.jsp ページ

errorInfo.jsp

にジャンプします。

コードをコピー コードは次のとおりです:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>


 
   
   
   
     
   
 
     

     

          
             
      

      

          
              
                  
                  
              
              
                  
                  
                  
              
              
                  
                      
                      
                      
                  
              
          

错误人员名单
姓名	身份证	错误信息

      

     

样式表：queryErrorInfo.css

复制代码代码如下:

html,body, .errorMain{
overflow:hidden;
高さ: 100%;
高さ: 100%;
}

#showErrorInfo{
幅: 100%;
OVERFLOW-Y: 自動;
OVERFLOW-X:非表示;
}

.errorTable{
幅: 90%;
マージン: 10px 5%;
font-size: 12px;
ボーダー: 1px 実線 #8DC8FF;
}

.errorTable td{
height: 40px;
border-right: 1px Solid #8DC8FF;
border-bottom:1px Solid #8DC8FF;
text-align: center;
}

.errorTable td:last-child{
border-right: 0px;
}

td[id="btn"]{
border-bottom: 0px;
}

.errorTitle{
font-weight: 太字;
font-size: 14px;
背景色: #C6E3FF;
カラー: #176ED2;
テキスト配置: 中央;
}

.errorBtn{
幅: 100%;
高さ: 20px;
text-align: center;
下: 0px;
位置:絶対;
}

結果如下：