1. Modaldialog คืออะไร?
Showmodaldialog เป็นวิธีการของวัตถุ JSwindow
ความแตกต่างคือ: หลังจากเปิด showmodaldialog หน้าต่างหลักไม่สามารถโฟกัสได้ (นั่นคือไม่สามารถใช้งานได้)
คุณสามารถตั้งค่าของ window.returnvalue ใน sub -window เพื่อให้หน้าต่างหลักสามารถรับ returnValue นี้ได้
2. ตัวอย่างหนึ่ง
1) main.html ในหน้าต่างหลัก
2) เปิด sub -window sub.html ในหน้าต่างหลักผ่าน showmodaldialog
3) ตั้งค่า returnValue ใน sub -window และกลับไปที่หน้าต่างหลักที่จะใช้
main.html
คัดลอกรหัสรหัสดังนี้:
<html>
<head>
<medaname = "generator" content = "Oscar999">
</head>
<script>
FunctionShowModal ()
-
varret = window.showmodaldialog ("sub.html? temp ="+math.random ());
การแจ้งเตือน ("subreturnvalueis"+ret);
-
</script>
<body>
<อินพุต = button1Type = buttonValue = "openSub" name = button1Onclick = "showModal ();" >>
</body>
</html>
sub.html
คัดลอกรหัสรหัสดังนี้:
<html>
<head>
<medaname = "generator" content = "Oscar999">
</head>
<script>
functionReturnmain ()
-
window.returnValue = "returnFromsub";
window.close ();
-
</script>
<body>
<inputId = button1Type = buttonValue = "returnandclose" name = button1onclick = "returnmain ()">
</body>
</html>
คำอธิบายพิเศษ: เมื่อวิธีการของ showmodaldialog ใน main.html วัตถุประสงค์ของการใช้ math.random () คือการหลีกเลี่ยงแคช
3. ShowModaldialog ในรายละเอียด
VreturnValue = Window.ShowModaldialog (surl [, varguments] [, sfeatures])))
Surl
ต้องใช้พารามิเตอร์ประเภท: สตริง URL ที่ใช้เพื่อระบุเอกสารที่จะแสดงในกล่องโต้ตอบ
varguments
พารามิเตอร์เสริมประเภท: ตัวแปร ใช้เพื่อส่งผ่านพารามิเตอร์ไปยังกล่องโต้ตอบ ประเภทพารามิเตอร์ที่ส่งผ่านไม่ จำกัด รวมถึงอาร์เรย์ ฯลฯ กล่องโต้ตอบได้รับพารามิเตอร์ที่ส่งผ่านผ่าน Window.dialogarguments
sfeatures
พารามิเตอร์เสริมประเภท: สตริง ใช้เพื่ออธิบายลักษณะที่ปรากฏและข้อมูลอื่น ๆ ของกล่องโต้ตอบคุณสามารถใช้หนึ่งหรือมากกว่าด้านล่างและใช้เซ็กเมนต์ ";" เพื่อแยก
กล่องโต้ตอบกล่องโต้ตอบแบบโต้ตอบไม่น้อยกว่า 100px, Dialogheight และ Dialogwidth ใน IE4 คือ EM และ IE5 คือ PX
Dialogwidth: กล่องโต้ตอบความกว้าง
Dialogleft: ระยะทางจากด้านซ้ายของเดสก์ท็อป
บทสนทนา: ระยะทางจากเดสก์ท็อป
ศูนย์: ใช่ | ไม่ |
Help: {ใช่ |
resizable: {ใช่ | หมายเลขเริ่มต้น
สถานะ: {ใช่ | ค่าเริ่มต้นคือใช่ [modeless] หรือไม่มี [modal]
Scroll: {ใช่ | ค่าเริ่มต้นคือใช่
มีคุณลักษณะหลายอย่างที่ใช้ใน HTA ซึ่งโดยทั่วไปไม่ได้ใช้ในหน้าเว็บทั่วไป
Dialoghide: {ใช่ | ค่าเริ่มต้นคือไม่
Edge: {Sunken | ยก}: ระบุสไตล์เฟรมของกล่องโต้ตอบ ค่าเริ่มต้นคือการเพิ่ม
unadorned: ใช่
4. ความเข้ากันได้ของเบราว์เซอร์
แต่ไม่ใช่เบราว์เซอร์ทั้งหมดที่เข้ากันได้กับการใช้งานนี้
หากคุณเรียกใช้ตัวอย่างข้างต้นในโครเมี่ยมหน้าต่างหลักสามารถได้รับโฟกัสที่จะเกิดขึ้น
ต่อไปนี้คือการสนับสนุนของเบราว์เซอร์กระแสหลักในวิธีนี้
| เบราว์เซอร์ | ไม่ว่าจะสนับสนุน | สถานะ |
| IE9 | ||
| Firefox13.0 | ||
| Safari5.1 | ||
| Chrome19.0 | ไม่ใช่กล่องโต้ตอบแบบโมดอล แต่เปิดมีหน้าต่างใหม่ | |
| Opera12.0 | ทุกอย่างเกิดขึ้นไม่ใช่แม้แต่หน้าต่าง |
หากมีพารามิเตอร์ที่แนะนำใน varguments ไปยังหน้าต่าง:
คัดลอกรหัสรหัสดังนี้:
var return = window.showmodaldialog ("sub.html? temp ="+math.random (), หน้าต่าง);
ใน sub -window ค่าต่อไปนี้คือ:
| เบราว์เซอร์ | กล่องโต้ตอบโมดอล | window.opner | window.dialogarguments | returnValue |
| IE9 | ไม่ได้กำหนด | [หน้าต่างวัตถุ] | ||
| Firefox13.0 | [ObjectWindow] | [ObjectWindow] | ||
| Safari5.1 | [ObjectWindow] | [ObjectWindow] | ||
| Chrome19.0 | [ObjectWindow] | ไม่ได้กำหนด |
โปรดทราบว่าภายใต้เบราว์เซอร์ Firefox หาก sub -window ได้รับการรีเฟรชหน้าต่าง dialogarguments จะยังคงหายไปและไม่ได้กำหนด ในผลลัพธ์ข้างต้นเราจะเห็นได้ว่าค่าส่งคืนค่าส่งคืนค่าใช้จ่ายคือเฉพาะเบราว์เซอร์โครเมี่ยมที่ส่งคืนไม่ได้กำหนดและไม่มีปัญหากับเบราว์เซอร์อื่น ๆ
5. วิธีแก้ปัญหาความเข้ากันได้ของโครเมี่ยม
ทิศทางคือ: set window.opner.returnvalue = "" "
main.html
คัดลอกรหัสรหัสดังนี้:
<html>
<head>
<meta name = "general" content = "Oscar999">
</head>
<script>
ฟังก์ชั่น showmodal ()
-
var return = window.showmodaldialog ("sub.html? temp ="+math.random (), หน้าต่าง);
// สำหรับโครเมี่ยม
ถ้า (ret == ไม่ได้กำหนด)
-
ret = window.returnvalue;
-
การแจ้งเตือน ("ค่าส่งคืนย่อยคือ"+ret);
-
</script>
<body>
<อินพุต ID = button1 type = value = "Open Sub" name = button1 onClick = "showModal ();" >>
</body>
</html>
sub.html
คัดลอกรหัสรหัสดังนี้:
<html>
<head>
<meta name = "general" content = "Oscar999">
</head>
<script>
ฟังก์ชั่น returnmain ()
-
if (window.opner! = ไม่ได้กำหนด)
-
window.opner.returnvalue = "กลับจากย่อย";
} อื่น {
window.returnvalue = "กลับจากย่อย";
-
window.close ();
-
</script>
<body>
<อินพุต ID = button1 type = value = "return and close" name = button1 onclick = "returnmain ()">
</body>
</html>
นี่คือการพิจารณาว่าวัตถุบางอย่างถูกกำหนดให้แยกแยะเบราว์เซอร์หรือไม่ แน่นอนคุณสามารถตัดสินประเภทของเบราว์เซอร์
สิ่งนี้ใช้เพื่อใช้การคืนค่าของหน้าต่างหลัก
var oldValue = window.returnvalue;
var newValue = showmodaldialog ()
window.returnvalue = oldValue
6. ควรสังเกตว่าการทดสอบภายใต้ Chrome จำเป็นต้องใส่ไฟล์ HTML ลงในเว็บเซิร์ฟเวอร์ (Tomcat, ... ) เพื่อเข้าถึงการทดสอบภายใต้ URL HTTP มิฉะนั้นจะไม่ประสบความสำเร็จ