ホームページ > ウェブフロントエンド > jsチュートリアル > jqueryの使用例を詳しく解説 showModelDialog_jquery

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

WBOY
リリース: 2016-05-16 17:14:14
オリジナル
2361 人が閲覧しました

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;
位置:絶対;
}

結果如下:
jqueryの使用例を詳しく解説 showModelDialog_jquery

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート