モーダルウィンドウとモーダルウィンドウ

5231 ワード

JavaScript html スクリプト

ダイアログは、一般的に2つのタイプに分類されます.モードタイプとモードタイプ(modeless)があります.モダリティダイアログとは、有効なクローズ手段がない限り、ユーザのマウスフォーカスまたは入力カーソルがその上に留まり続けるダイアログのことです.このような特性を強制することなく、現在のダイアログと他のウィンドウとの間でユーザーが切り替えられます.本論文では、JavaScript言語を使用して、この2つの種類のダイアログを作成し、サイズと位置を制御し、外観を変更し、ダイアログ間のデータ転送を紹介します.(引用)
一、モダリティと非モーダルダイアログの作成
モーダルダイアログを作成します.
vReturnValue=window.show ModalDialog(s URL[,vFree Agment]][,sOrnaments]]);
非モーダルダイアログを作成します.
vReturnValue=window.show ModelessDialog(s URL[,vFree Agment]][,sOrnaments]]);
・VRET nValue:show ModalDialog()に対して、開いているダイアログウィンドウに設定されているreturn Value属性値を表します.show ModelessDialog()については、新しいウィンドウオブジェクトを表します.
・VFreeeAgment:このパラメータは、開いているダイアログにある種類のデータを転送するために使用できます.データは数値、文字列、配列またはオブジェクトの種類です.この値を新しいウィンドウで参照すると、新たにwindowオブジェクトを作成するdialogAgMents属性があります.
・SOrnaments:このパラメータで新しいウィンドウの外観を指定します.選択可能なウィンドウの属性には様々な種類があります.複数のコントロールニーズがある場合、関連内容を1つの文字列で接続し、その間にセミコロンで区切ってください.以下は選択可能な属性の種類です.
o dialogHeight:sHeight
o dialogLeft:sXpos
o dialogTop:sYpos
o dialog Width:s Width
oセンター:(yes𞓜ノ124; 1𞓜0𞓜オンオフ)
o dialogHide:(yes𞓜no124; 0𞓜0|o off)
o edge:(sunken𞓜ライセン)
o help:(yes𞓜ノ124; 1𞓜0𞓜o off)
o resizable:(yes𞓜no124; 0𞓜0 124;ンオフ)
o scroll:(yes𞓜ノ124; 1𞓜0𞓜0|オンオフ)
o status:(yes𞓜ノ124; 1 124; 0𞓜o off)
二、コントロールダイアログのサイズと位置
三、ダイアログの外観を変更する
四、Noname 1.ページからNoname 2.htmlページにデータを転送します.
比較モードウィンドウと新しいウィンドウを開きます.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>          </TITLE>
<script language="javascript">
 var sColor="yyyy";
 var sName="xmddl369";
 function showModalWindow() {
   window.showModalDialog('Noname2.html',window,'dialogWidth:400px;dialogHeight:400px');
 }
 function showModellessWindow() {
  window.showModelessDialog('Noname2.html',window,'dialogWidth:400px;dialogHeight:400px;edge:sunken');
 }
 function update() 
  { 
  oColor.innerText = sColor; 
 } 
 document.write("sColor="+sColor+"<br>");
 document.write("sName="+sName+"<br>");
</script>
</HEAD>

<BODY>
<form>
  <input type="button" name="button" value="        " onclick="showModalWindow()">
  <input type="button" name="button" value="         " onclick="showModellessWindow()">
<BR>
<P>         : <SPAN ID="oColor" STYLE="color:red;font-size:24">Yellow</SPAN></P>
</form>
</BODY>
</HTML>

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


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javascript">
 function showOpenWindow() {
  window.open('http://www.sohu.com','name','height=600px,width=800px,toolbar=no,menubar=no,resizable=yes, scrollbars=yes, location=no, status=no');
 }
</script>
</HEAD>

<BODY>
<form>
 <input type="button" name="button" value="click me" onclick="showOpenWindow()">
</form>
</BODY>
</HTML>

新しいウィンドウをモードウィンドウで開く
モードウィンドウのhead部分に下記のコードを追加します.


<base targat='_self'>

=========================ちょっと他の知識=======================================================================
一、window.open()サポート環境:JavaScript 1.0+/JScript 1.0+/Nav 2+/IE 3+/Opera 3+
二、基本文法:
window.open(pageURL、name、parameters)
その中:
PageURLはサブウィンドウパスです.
nameはサブウィンドウのハンドルです.
parametersはウインドウパラメータ(各パラメータはカンマで区切られます)
三、例:


<SCRIPT> 
<!-- 
window.open(''page.html'',''newwindow'',''height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no'') 
//    
--> 
</SCRIPT>

スクリプトが実行された後、新しいフォームのnewwindowで開けます.幅は100で、高さは400で、スクリーンの上から0ピクセル、スクリーンの左から0ピクセル、ツールバーがなく、メニューバーがなく、スクロールバーがなく、サイズを調整できません.アドレスバーがなく、ステータスバーがありません.
照らし合わせてください
上記の例ではよく使われているいくつかのパラメータに加えて、他にも多くのパラメータがあります.
四、各パラメータ
このうちyes/noは1/0も使用できます.pixel valueは具体的な数値で、単位画素です.
パラメータの値を取る範囲について説明します.
124 124
always Lowered yes/no 124指定のウィンドウがすべてのウィンドウに隠れています.
always Raised yes/no 124指定の窓はすべての窓の上に浮遊しています.
depended yes/no 124は親の窓口と同時に閉じるかどうか
directores yes/no Nav 2と3のディレクトリバーが見えますか?
height pixel valueウィンドウの高さ
ホットキー
inner Height|pixel valueウィンドウのドキュメントのピクセルの高さ
inner Width|pixel valueウィンドウ内のドキュメントのピクセル幅
location yes/noの位置バーが見えるかどうか
menubar yes/noメニューバーが見えますか?
outerHeight|pixel value|設定ウィンドウ(装飾枠を含む)のピクセルの高さ
outer Width|pixel value 124;設定ウィンドウ(装飾枠を含む)のピクセル幅
resizable yes/no 124

Roma-Facebookツールチェーンが大まかです.