1. Apa itu Modaldialog?
Showmodaldialog adalah metode objek JSwindow.
Perbedaannya adalah: setelah showmodaldialog dibuka, jendela induk tidak bisa mendapatkan fokus (yaitu, tidak dapat dioperasikan).
Anda dapat mengatur nilai window.returnValue di sub -window, sehingga jendela induk bisa mendapatkan nilai kembali ini.
2. Salah satu contoh
1) Main.html di jendela utama,
2) Buka sub -window sub.html di jendela utama melalui showmodaldialog
3) Setel ReturnValue di sub -window dan kembali ke jendela utama untuk digunakan
Main.html
Salin kode kode sebagai berikut:
<Html>
<head>
<Medaname = "generator" konten = "oscar999">
</head>
<script>
Functionshowmodal ()
{{
varret = window.showmodaldialog ("sub.html? temp ="+math.random ());
Alert ("SubreturnValueis"+ret);
}
</script>
<body>
<InputId = button1type = ButtonValue = "OpenSub" name = Button1Onclick = "showModal ();" >>
</body>
</html>
sub.html
Salin kode kode sebagai berikut:
<Html>
<head>
<Medaname = "generator" konten = "oscar999">
</head>
<script>
FunctionRurnMain ()
{{
window.returnValue = "returnFromsub";
window.close ();
}
</script>
<body>
<InputId = button1type = ButtonValue = "returnAndClose" name = Button1Onclick = "returnMain ()">
</body>
</html>
Penjelasan Khusus: Ketika metode showmodaldialog di main.html, tujuan menggunakan math.random () adalah untuk menghindari cache.
3.Showmodaldialog secara detail
vreturnValue = window.showmodaldialog (surl [, varguments] [, sfeatures])))
Surl
Must -Cheose Parameter, Ketik: String. URL digunakan untuk menentukan dokumen yang akan ditampilkan di kotak dialog.
Vargumen
Parameter opsional, ketik: varian. Digunakan untuk meneruskan parameter ke kotak dialog. Jenis parameter yang dilewati tidak terbatas, termasuk array, dll. Kotak dialog memperoleh parameter yang dilewati melalui jendela.
Sfeature
Parameter opsional, ketik: String. Digunakan untuk menggambarkan penampilan dan informasi lain dari kotak dialog, Anda dapat menggunakan satu atau lebih di bawah ini, dan menggunakan segmen ";"
Tinggi kotak dialog dialog, tidak kurang dari 100px, dialogheight dan dialogwidth di IE4 adalah EM, dan IE5 adalah PX.
Dialogwidth: Lebar kotak dialog.
Dialogleft: Jarak dari kiri desktop.
Dialogtop: Jarak dari desktop.
Center: {Ya |
Bantuan: {Ya |
UNDANGNYA: {Ya | No default.
Status: {Ya | Standarnya adalah ya [tanpa modal] atau tidak [modal].
Gulungan: Ya | Standarnya adalah ya.
Ada beberapa atribut yang digunakan dalam HTA, yang umumnya tidak digunakan di halaman web umum.
Dialoghide: {Ya | Standarnya adalah tidak.
Edge: {Sunken |. Defaultnya dinaikkan.
Unjovel: {Ya |
4. Kompatibilitas browser
Tetapi tidak semua browser kompatibel dengan penggunaan ini.
Jika Anda menjalankan contoh di atas di Chrome, jendela induk dapat memperoleh fokus sesuka hati.
Berikut ini adalah dukungan dari browser arus utama pada metode ini.
| Browser | Apakah akan mendukung | negara |
| IE9 | ○ | |
| Firefox13.0 | ○ | |
| safari5.1 | ○ | |
| chrome19.0 | × | Ini bukan kotak dialog modal, tapi buka memiliki jendela baru |
| Opera12.0 | × | Semuanya terjadi, bahkan tidak ada jendela |
Jika ada parameter yang diperkenalkan dalam vargumen ke jendela:
Salin kode kode sebagai berikut:
var return = window.showmodaldialog ("sub.html? temp ="+math.random (), window);
Di sub -window, nilai berikut adalah:
| Browser | Dialog modal | window.opner | Window.dialogarguments | ReturnValue |
| IE9 | ○ | belum diartikan | [Jendela Objek] | ○ |
| Firefox13.0 | ○ | [ObjectWindow] | [ObjectWindow] | ○ |
| safari5.1 | ○ | [ObjectWindow] | [ObjectWindow] | ○ |
| chrome19.0 | × | [ObjectWindow] | belum diartikan | × |
Perhatikan bahwa di bawah browser Firefox, jika sub -window disegarkan, window.dialogarguments masih akan hilang dan menjadi tidak terdefinisi. Dalam hasil di atas, kita dapat melihat bahwa nilai kembali nilai pengembalian adalah bahwa hanya browser chrome yang kembali tidak ditentukan, dan tidak ada masalah dengan browser lain.
5. Cara Memecahkan Kompatibilitas Chrome.
Arahnya adalah: atur window.opner.ReturnValue = "" "
Main.html
Salin kode kode sebagai berikut:
<Html>
<head>
<Meta name = "umum" konten = "oscar999">
</head>
<script>
Fungsi showmodal ()
{{
var return = window.showmodaldialog ("sub.html? temp ="+math.random (), window);
// untuk chrome
if (ret == tidak terdefinisi)
{{
Ret = window.ReturnValue;
}
Peringatan ("Nilai Sub Return adalah"+ret);
}
</script>
<body>
<Input ID = Button1 type = tombol nilai = "buka sub" name = button1 onclick = "showModal ();" >>
</body>
</html>
sub.html
Salin kode kode sebagai berikut:
<Html>
<head>
<Meta name = "umum" konten = "oscar999">
</head>
<script>
Fungsi returnmain ()
{{
if (window.opner! = tidak terdefinisi)
{{
Window.opner.ReturnValue = "kembali dari sub";
} Kalau tidak {
window.ReturnValue = "Return From Sub";
}
window.close ();
}
</script>
<body>
<Input ID = Button1 type = tombol value = "return and close" name = button1 onclick = "returnMain ()">
</body>
</html>
Ini untuk menentukan apakah objek tertentu didefinisikan untuk membedakan browser. Tentu saja, Anda juga dapat menilai jenis jenis browser
Ini digunakan untuk menggunakan nilai kembali dari jendela induk.
Var oldValue = window.ReturnValue;
var newValue = showmodaldialog ()
Window.ReturnValue = OldValue
6. Perlu dicatat bahwa tes di bawah Chrome perlu memasukkan file HTML ke server web (Tomcat, ...) untuk mengakses tes di bawah URL HTTP. Kalau tidak, itu tidak akan berhasil.