JSのモーダルダイアログボックスとノンモーダルダイアログボックスの操作スキルまとめ_基礎知識

モーダルウィンドウの JavaScript スキルのまとめ (値の受け渡し、開く、更新)
1. ポップアップするページには、

の間に必ず を入れてください。 head> タグを指定しないと、モーダル ウィンドウがポップアップし、ボタンをクリックすると、新しいページが再度ポップアップします。
2. ページをポップアップするボタンのイベント処理には、現在のモーダル ウィンドウを閉じるための Response.Write(new Function().ClosePage()) ステートメントが必要です。
3. ユーモアのあるキャッシュの理由により、モーダル ウィンドウでデータを変更すると、親ページのデータが更新されますが、ボタンをもう一度クリックすると、モーダル ウィンドウが再びポップアップします。実験後、HTML コードを手動で変更した後でも、ポップアップ モーダル ウィンドウをクリックすると同じページが表示されることがわかりました。したがって、このメカニズムは次のようにする必要があります。モーダル ウィンドウをポップアップすることでここをバイパスできます。aspx ページの後にランダムなパラメーターを追加します。この問題を回避するには、上記のモーダル ウィンドウ コードを次のように変更できます:

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

public string ModalWindow(string openAspxPage,int width,int height)
{
string js = string.Format("javascript:window.showModalDialog("{0}&rand=" new Random ().Next ().ToString() "",window,"status:false;dialogWidth:{1}px;dialogHeight:{2}px")",openAspxPage,width,height);
return js;
}

赤色の一部のパラメーターはカスタマイズされたパラメーターであることに注意してください。このパラメーターはプロジェクト全体で唯一の変更名である必要があり、意味がありません (最も安全な方法は、この変更に次のような名前を付けることです)。 lakjsdflawdfqwoifa 名)。
基本的に上記の条件を満たしていればページ作成時のモーダルウィンドウの操作は比較的簡単です。
//------------------------------------------ -------------------------------------------------- ----------------
モーダルウィンドウ - 時々とても便利だと感じるもの
B/S 構造プロジェクトである showModalDialog と showModelessDialog の使用について ポップアップするウィンドウwindow.open を使用すると、一部の広告ブロック ツールによってブロックされるため、問題を解決するには showModalDialog を使用するしかありません。ただし、showModalDialog の欠点は、ページ間の値の転送が面倒なことです (方法は 2 つあります)。値を転送します)。ただし、このインターセプト問題を解決する唯一の方法はこれを使用することです。コードはわずか 2 ストロークで記述されましたが、コードのデバッグ中に問題が発見されました。showModalDialog を使用してポップアップされるウィンドウの内容は、最初からページにアクセスしたときに表示される内容でした。これは、showModalDialog と showModelessDialog を使用して asp.net でポップアップ フォームを作成する場合に、問題が実際に読み取りページ キャッシュにあることを示しています。

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

Response.Expires = 0;
Response.Cache.SetNoStore();
Response.AppendHeader("プラグマ", "キャッシュなし");
でキャッシュをクリアします。 showModalDialog メソッドをテストするには、asp、php、js、vbscript を使用します。キャッシュをクリアする必要はありません。showModalDialog については、以下の詳細な紹介を参照してください。
showModalDialog の使用体験。と showModelessDialog
1. showModalDialog と showModelessDialog の違いは何ですか?
ShowModalDialog: 開かれた後、入力フォーカスは常に維持されます。ダイアログ ボックスを閉じない限り、ユーザーはメイン ウィンドウに切り替えることはできません。アラートの操作効果と同様。
ShowModelessDialog: 開かれた後、ユーザーは入力フォーカスをランダムに切り替えることができます。メイン ウィンドウには影響しません (せいぜいしばらくブロックされます。:P)
2. showModalDialog と showModelessDialog のハイパーリンクが新しいウィンドウをポップアップしないようにするにはどうすればよいですか?
開いた Web ページに を追加するだけです。この文は通常、 と の間に配置されます。
3. showModalDialog と showModelessDialog のコンテンツを更新するにはどうすればよいですか?
showModalDialog および showModelessDialog では、F5 キーを押して更新することができず、メニューがポップアップ表示されません。これは JavaScript のみに依存します。以下は関連するコードです:
"reload " href="filename.htm" style="display:none">reload...
filename.htm を Web ページの名前に置き換えて、それを Web ページに挿入します。これは、 と組み合わせて使用​​する必要があることに注意してください。そうしないと、F5 を押すと新しいウィンドウがポップアップします。
注: アクセス時に自動的に更新したい場合は、モーダル ウィンドウが開いたときに、開いているページにレコード変数を設定し、変数が 1 に設定され、上記の方法を使用してモーダルを更新できます。
4. showModalDialog (または showModelessDialog) で開いたウィンドウを JavaScript を使用して閉じる方法。

とも連携します。それ以外の場合は、新しいものが作成されます。 IEウィンドウを開いてから閉じます。
5. showModalDialog と showModelessDialog のデータ転送スキル。
例:
次に、showModalDialog (または showModelessDialog) で変数 var_name を読み取るか、設定する必要があります。
一般的な配信方法:
window.showModalDialog("filename.htm",var_name)
// var_name 変数を渡します
showModalDialog (または showModelessDialog) で読み取りおよび設定する場合:
alter(window.dialogArguments) // var_name 変数を読み取ります
window.dialogArguments="oyiboy" // var_name 変数を設定します
この方法は問題ありませんが、var_name を操作しているときに 2 番目の変数 var_id も操作したい場合はどうすればよいでしょうか?操作できなくなります。これがこの配信方法の制限です。

cess forward forwardure-ure 🎜> showModalDialog（またはshowModelessDialog）の読み取りと設定時：
alert(window.dialogArguments.var_name) // var_name 変数
window.dialogArguments.var_name ="oyiboy" //var_name変数を設定します
同時にvar_id変数も操作できます
alert(window.dialogArguments.var_id)//var_id変数を読み込みます
Window.dialogArguments.var_id ="001"//var_id 変数を設定します
フォームオブジェクト内の要素など、ウィンドウ内の任意のオブジェクトを操作します。
window.dialogArguments.form1.index1.value="これは、index1 要素の値を設定しています"
ポップアップ ウィンドウの戻り​​値: window.returnValue = ...;
6. showModelessDialog は相互運用します。
次のコードの主な機能は、showModelessDialog 内で別の showModelessDialog の位置を移動することです。
メインファイルの js コードの一部。
var s1=showModelessDialog('control.htm',window,"dialogTop:1px;dialogLeft:1px") //コントロール ウィンドウを開きます
var s2=showModelessDialog('about:blank',window,"dialogTop : 200px;dialogLeft:300px") // 制御されたウィンドウを開きます
.htm コードの制御部分。




コードをコピー

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

<script> <BR> //位置データを操作します。ウィンドウの位置データは「xxxpx」モードなので、このような特殊な操作関数が必要です。 <BR>function countNumber(A_strNumber,A_strWhatdo) <BR>{ <BR>A_strNumber=A_strNumber.replace('px','') <BR>A_strNumber-=0 <BR>switch(A_strWhatdo) <BR>{ <BR>case "-":A_strNumber-=10;break; <BR>case " ":A_strNumber =10;break; <BR>return A_strNumber "px" <BR>} <BR> </script>
input type="button" onclick="window.dialogArguments.s2.dialogLeft=countNumber(window.dialogArguments.s2.dialogLeft,'-')" value="左にシフト">




上記の重要な部分は次のとおりです:

ウィンドウの命名方法: var s1=showModelessDialog('control.htm',window,"dialogTop:1px;dialogLeft:1px")
変数アクセス方法: window.dialogArguments.s2.dialogTop
この例は、showModelessDialog と showModelessDialog の違いのみです。位置操作関数はこの原理を利用して、showModelessDialog 間で相互に表示ページを制御したり、変数やデータを転送したりすることができます。これはあなたのパフォーマンス次第です。
=========================================== === =====================
window.showModalDialog() メソッドは、HTML コンテンツを表示するモーダル ダイアログ ボックスを作成するために使用されます。
window.showModelessDialog() メソッドは、HTML コンテンツを表示する非モーダル ダイアログ ボックスを作成するために使用されます。
使用法:
vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFunctions])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeature])
パラメータの説明:
sURL -- 必須パラメータ、タイプ: 文字列。ダイアログボックスに表示するドキュメントのURLを指定するために使用します。
vArguments -- オプションのパラメーター、タイプ: バリアント。パラメータをダイアログ ボックスに渡すために使用されます。渡されるパラメータのタイプは、配列などを含めて制限されません。ダイアログ ボックスは、window.dialogArguments を通じて渡されたパラメータを取得します。
sFunction -- オプションのパラメータ、タイプ: 文字列。ダイアログ ボックスの外観やその他の情報を記述するために使用され、次の 1 つ以上をセミコロン「;」で区切って使用できます。
1.dialogHeight: ダイアログの高さ (100px 以上)。IE4 では、dialogHeight と DialogWidth のデフォルトの単位は em ですが、IE5 以降では、モーダル ダイアログ ボックスを定義するときに単位として px を使用します。
2.dialogWidth: ダイアログの幅。
3.dialogLeft: 画面の左側からの距離。
4.dialogTop: 画面からの距離。
5.center: {yes | no | 1 | 0}: ウィンドウが中央にあるかどうか。デフォルトははいですが、高さと幅は指定できます。
6.help: {yes | no | 0}: ヘルプ ボタンを表示するかどうか。デフォルトは [はい] です。
7.resizable: {yes | no | 0 } [IE5＋]: サイズを変更できるかどうか。デフォルトは「いいえ」です。
8.status: {はい | いいえ | 0} [IE5]: ステータスバーを表示するかどうか。デフォルトは、yes[Modal] または no[Modal] です。
9.scroll:{ はい | いいえ | 0 | オフ }: ダイアログ ボックスにスクロール バーを表示するかどうかを示します。デフォルトは「はい」です。
次の属性は HTA で使用され、通常の Web ページでは通常使用されません。
10.dialogHide:{ yes | no | on | off }: 印刷中または印刷プレビュー中にダイアログ ボックスを非表示にするかどうか。デフォルトは「いいえ」です。
11.edge:{ sunken | raise }: ダイアログ ボックスの境界線のスタイルを指定します。デフォルトは引き上げられています。
12.unadorned:{ はい | いいえ | 0 | オフ }: デフォルトは no です。