JS ダイアログ ボックス_JS モーダル ダイアログ ボックス showModalDialog の使用法の概要_JavaScript スキル

親ウィンドウ:

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

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

< script language= "javascript" type="text/javascript">function a(){var wname = document.form1.backname.value;parent.window.returnValue=wname ; // 親ウィンドウは前のページです window.close();}

< ;form name= "form1" action="">







---- 1. 基本语法

---- window对象有一个方法称为showModalDialog ，我们可以在页面按钮的onclick中写如下代码：

< BUTTON onclick="window.showModalDialog
('dialog.htm')" >Search< /BUTTON >

---- 系统会在新窗口中打开dialog.htm页面，并且等待用户响应，如果用户不响应该页面，那么主页面将得不到光标。
---- 在dialog.htm中设置window对象的returnValue属性，就可以让主页面得到返回值。例如，在页面的确定按钮的onclick中写：

window.returnValue = window.
document.all.iptPeopleID.value

---- 将输入框iptPeopleID的值赋给window对象的returnValue属性。在主页面中就可以得到这个值：
var str = showModalDialog ("dialog1.htm")

---- 2. 传递初始化值
---- 如果要向模态页面中传递初始化值，可以在主页面中用如下语句：

var cSearchValue=showModalDialog
('dialog.htm', 'ABC')
在dialog.htm中使用window.dialogArguments
属性可以得到'ABC'。例如：
< SCRIPT FOR=window EVENT=onload LANGUAGE="JScript" >
if (window.dialogArguments != null)
window.document.all.iptPeopleID.value = window.dialogArguments;
< /SCRIPT >

---- 3. 传递多个数值
---- 如果要向模态页面中传递多个参数，可以先在主页面中定义一个对象，

function myDialog() {
var str1;
var str2;
}

---- 显示模态页面之前初始化该对象，然后调用showModalDialog 方法。
function WelcomeYou(iniStr1,iniStr2) {
myDialog.str1 = iniStr1;
myDialog.str2 =iniStr2 ;

if (showModalDialog ("dialog2.htm", myDialog)
==false) //将对象传入
......

---- 在模态页面中，可以用这样的代码
window.document.all.iptID.value=
window.dialogArguments.str1
来引用数值，或者用这样的代码对之赋值
window.dialogArguments.str1 =
window.document.all.iptID.value

---- 完整例程如下：
---- 对于只传递一个参数的情况，见：Main1.htm和dialog1.htm。

---- 对于传递多个参数的情况，见：Main2.htm和dialog2.htm。

父窗体：
dim xxx '返回值
dim yyy '传到子窗体的参数
var xxx = ShowModalDialog ('xxx.asp','yyy','dialogWidth:100px;DialogHeight=290px;status:no')
子窗体：
dim yyy '从父窗体传来的参数
dim xxx '传回父窗体的参数
yyy = window.dialogArguments
xxx = window.returnValue
 

window.dialogArguments的用法

Javascript有许多内建的方法来产生对话框，如：window.alert(),window.confirm(),window.prompt().等。然而IE提供更多的方法支持对话框。如：

showModalDialog()(IE4+支持)
showModelessDialog()(IE5+支持)

window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框，由于是对话框，因此它并没有一般用window.open()打开的窗口的所有属性。
window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。

当我们用showModelessDialog()打开窗口时，不必用window.close()去关闭它，当以非模态方式［IE5］打开时，打开对话框的窗口仍可以进行其他的操作，即对话框不总是最上面的焦点，当打开它的窗口ＵＲＬ改变时，它自动关闭。而模态［ＩＥ４］方式的对话框始终有焦点（焦点不可移走，直到它关闭）。模态对话框和打开它的窗口相联系，因此我们打开另外的窗口时，他们的链接关系依然保存，并且隐藏在活动窗口的下面。

使用方法如下：
vReturnValue=window.showModalDialog(sURL[,vArguments][,sFeatures])
vReturnValue=window.showModelessDialog(sURL[,vArguments][,sFeatures])

パラメータの説明:
sURL
必須パラメータ、タイプ: 文字列。ダイアログボックスに表示するドキュメントのURLを指定するために使用します。
vArguments
オプションのパラメーター、タイプ: バリアント。パラメータをダイアログ ボックスに渡すために使用されます。渡されるパラメータのタイプは、配列などを含めて制限されません。ダイアログ ボックスは、window.dialogArguments を通じて渡されたパラメータを取得します。
sFunction
オプションのパラメーター、タイプ: 文字列。ダイアログ ボックスの外観やその他の情報を記述するために使用され、次の 1 つ以上をセミコロン「;」で区切って使用できます。
dialogHeight ダイアログ ボックスの高さ (100 ピクセル以上)。IE4 では、dialogHeight と DialogWidth のデフォルトの単位は em ですが、IE5 では、視覚化の便宜上、モーダル ダイアログ ボックスを定義するときに単位として px を使用します。 。
dialogWidth: ダイアログの幅。
dialogLeft: デスクトップの左側からの距離。
dialogTop: デスクトップからの距離。
center:{yes|no|1|0}: ウィンドウが中央に配置されるかどうか。デフォルトは yes ですが、高さと幅は引き続き指定できます。
help:{yes|no|1|0}: ヘルプ ボタンを表示するかどうか。デフォルトは [はい] です。
resizable:{yes|no|1|0}[ＩＥ５＋]: サイズ変更可能かどうか。デフォルトは「いいえ」です。
status:{yes|no|1|0}［IE5］：ステータスバーを表示するかどうか。デフォルトは、yes[モードレス]またはno[モーダル]です。
scroll:{yes|no|1|0|on|off}: ダイアログ ボックスにスクロール バーを表示するかどうかを示します。デフォルトは「はい」です。

HTA では、通常の Web ページでは通常使用されない属性もいくつか使用されます。
dialogHide:{yes|no|1|0|on|off}: 印刷中または印刷プレビュー中にダイアログ ボックスを非表示にするかどうか。デフォルトは「いいえ」です。
edge:{sunken|raised}: ダイアログ ボックスの境界線のスタイルを指定します。デフォルトは引き上げられています。
unadorned:{yes|no|1|0|on|off}: デフォルトは no です。

パラメータの受け渡し:
ダイアログ ボックスにパラメータを渡すには、vArguments を介してパラメータが渡されます。文字列型の場合、最大長は 4096 文字です。オブジェクトを渡すこともできます。例:

test1.htm
====================
<script><br>varmxh1=newArray(" mxh","net_lover","Mencius Chapter E")<br>varmxh2=window.open("about:blank","window_mxh")<br>//ダイアログ ボックスに配列を渡します<br>window.showModalDialog (" test2.htm",mxh1)<br>//ウィンドウ オブジェクトをダイアログ ボックスに渡します<br>window.showModalDialog("test3.htm",mxh2)<br></script>

test2.htm
====================
<script><br>vara=window.dialogArguments <br>alert("渡したパラメータは次のとおりです: " a)<br></script>

test3.htm
====================
<script><br>vara=window.dialogArguments <br>alert("渡したパラメータはウィンドウ オブジェクトです。名前: " a.name)<br></script>

window.returnValue を通じて、ダイアログ ボックスを開いたウィンドウに情報を返すことができます。もちろん、オブジェクトにすることもできます。例:

test4.htm
===================
<script><br>vara=window.showModalDialog( "test5.htm")<br>for(i=0;i<a.length></script>

test5.htm
==================
<script><br>functionsendTo()<br> {<br>vara=newArray("a","b")<br>window.returnValue=a<br>window.close()<br>}<br></script>

FAQ:
1. 新しいウィンドウを開かずにモーダル ダイアログ ボックスで送信するにはどうすればよいですか?
ブラウザが IE5.5 の場合、ダイアログ ボックスで name 属性を持つ iframe を使用でき、送信時にターゲットを iframe の名前に設定できます。 IE4 の場合、高さ 0 のフレームを使用できます: 例:

test6.htm
==================
<script><br>window.showModalDialog("test7 .htm")<br></script>

test7.htm
====================
if(window.location.search)alert(window. location .search)



< ; /フレームセット>

test8.htm
==================



<script><br>if(window.location.search) alert(window.location.search)<br></script>
2. http://servername/virtualdirname/test.htm?name=mxh を通じてパラメータをダイアログ ボックスに直接渡すことができますか?
答えはノーです。しかし、フレーム内では可能です。