รหัสโปรแกรม
ฟังก์ชั่น openEgg (ประเภท) {
window.showModalDialog('../EggPlay.aspx?type='+type,'','dialogHeight: 600px; dialWidth: 800px; edge: Raised; center: Yes; help: No; ปรับขนาดได้: No; สถานะ: No; เลื่อน:ไม่;');
-
Javascript มีวิธีการในตัวมากมายในการสร้างกล่องโต้ตอบ เช่น window.alert(), window.confirm(), window.prompt() เป็นต้น อย่างไรก็ตาม IE มีวิธีการเพิ่มเติมเพื่อรองรับกล่องโต้ตอบ เช่น:
showModalDialog() (รองรับโดย IE 4+)
showModelessDialog() (รองรับโดย IE 5+)
เมธอด window.showModalDialog() ใช้เพื่อสร้างกล่องโต้ตอบโมดอลที่แสดงเนื้อหา HTML เนื่องจากเป็นกล่องโต้ตอบ จึงไม่มีคุณสมบัติทั้งหมดของหน้าต่างโดยทั่วไปที่เปิดด้วย window.open()
เมธอด window.showModelessDialog() ใช้เพื่อสร้างกล่องโต้ตอบแบบไม่มีโหมดที่แสดงเนื้อหา HTML
เมื่อเราใช้ showModelessDialog() เพื่อเปิดหน้าต่าง เราไม่จำเป็นต้องใช้ window.close() เพื่อปิดมัน เมื่อเปิดขึ้นในโหมดที่ไม่ใช่กิริยาช่วย [IE5] หน้าต่างที่เปิดกล่องโต้ตอบยังสามารถดำเนินการอื่นได้ การดำเนินการ กล่าวคือ กล่องโต้ตอบไม่ได้เปิดอยู่เสมอไป โดยเป็นโฟกัสด้านบนสุดและปิดโดยอัตโนมัติเมื่อ URL ของหน้าต่างที่เปิดขึ้นเปลี่ยนไป กล่องโต้ตอบโมดอล [IE4] จะมีโฟกัสอยู่เสมอ (โฟกัสไม่สามารถลบออกได้จนกว่าจะปิด) กล่องโต้ตอบโมดอลจะเชื่อมโยงกับหน้าต่างที่เปิดขึ้น ดังนั้นเมื่อเราเปิดหน้าต่างอื่น ความสัมพันธ์ของลิงก์จะยังคงถูกรักษาและซ่อนอยู่ใต้หน้าต่างที่ใช้งานอยู่
วิธีใช้:
vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [, sFeatures])
คำอธิบายพารามิเตอร์:
sURL
พารามิเตอร์ที่ต้องการ ประเภท: สตริง ใช้เพื่อระบุ URL ของเอกสารที่จะแสดงในกล่องโต้ตอบ
vอาร์กิวเมนต์
พารามิเตอร์ทางเลือก ประเภท: ตัวแปร ใช้เพื่อส่งพารามิเตอร์ไปยังกล่องโต้ตอบ ไม่จำกัดประเภทของพารามิเตอร์ที่ส่ง รวมถึงอาร์เรย์ ฯลฯ กล่องโต้ตอบได้รับพารามิเตอร์ที่ส่งผ่านผ่าน window.dialogArguments
คุณสมบัติ
พารามิเตอร์ทางเลือก ประเภท: string ใช้เพื่ออธิบายลักษณะที่ปรากฏของกล่องโต้ตอบและข้อมูลอื่นๆ คุณสามารถใช้อย่างใดอย่างหนึ่งต่อไปนี้ โดยคั่นด้วยเครื่องหมายอัฒภาค ";"
DialogHeight คือความสูงของกล่องโต้ตอบ ไม่น้อยกว่า 100px หน่วยเริ่มต้นของ DialogHeight และ DialogWidth ใน IE4 คือ em ในขณะที่ใน IE5 คือ px เพื่อความสะดวก เมื่อกำหนดกล่องโต้ตอบโมดอล ให้ใช้ px เป็นหน่วย
DialogWidth: ความกว้างของกล่องโต้ตอบ
DialogLeft: ระยะห่างจากด้านซ้ายของเดสก์ท็อป
DialogTop: ระยะห่างจากเดสก์ท็อป
center: {yes |. no |. 1 | 0}: ไม่ว่าหน้าต่างจะอยู่ตรงกลาง ค่าเริ่มต้นคือใช่ แต่ยังสามารถระบุความสูงและความกว้างได้
ช่วยด้วย: {ใช่ |. ไม่ใช่ |. 1 | 0}: ไม่ว่าจะแสดงปุ่มช่วยเหลือ ค่าเริ่มต้นคือใช่
ปรับขนาดได้: {ใช่ |. ไม่ใช่ |. 1 | 0} [IE5+]: สามารถปรับขนาดได้หรือไม่ ค่าเริ่มต้นคือไม่
สถานะ: {yes |. no |. 1 | 0} [IE5+]: จะแสดงแถบสถานะหรือไม่ ค่าเริ่มต้นคือใช่[Modal] หรือไม่ใช่[Modal]
scroll:{ ใช่ |. ไม่ใช่ |. 1 |. 0 |. ปิด }: ระบุว่ากล่องโต้ตอบแสดงแถบเลื่อนหรือไม่ ค่าเริ่มต้นคือใช่
นอกจากนี้ยังมีคุณลักษณะหลายอย่างที่ใช้ใน HTA ซึ่งโดยทั่วไปจะไม่ใช้ในหน้าเว็บทั่วไป
DialogHide:{ ใช่ |. ไม่ใช่ |. 1 |. 0 |. ปิด }: กล่องโต้ตอบถูกซ่อนไว้ระหว่างการพิมพ์หรือแสดงตัวอย่างก่อนพิมพ์ ค่าเริ่มต้นคือไม่
edge:{ sunken |. ยกขึ้น }: ระบุรูปแบบเส้นขอบของกล่องโต้ตอบ ค่าเริ่มต้นจะเพิ่มขึ้น
ไม่มีการตกแต่ง:{ ใช่ |. ไม่ใช่ |. 1 |. เปิด |.
ผ่านพารามิเตอร์:
หากต้องการส่งพารามิเตอร์ไปยังกล่องโต้ตอบ พารามิเตอร์เหล่านั้นจะถูกส่งผ่าน vArguments ไม่มีการจำกัดประเภท สำหรับประเภทสตริง ความยาวสูงสุดคือ 4096 อักขระ คุณยังสามารถส่งผ่านอ็อบเจ็กต์ได้ เช่น:
รหัสโปรแกรม
test1.htm
-
<สคริปต์>
var mxh1 = อาร์เรย์ใหม่ ("mxh", "net_lover", "Mencius บทที่ E")
var mxh2 = window.open("about:blank","window_mxh")
// ส่งอาร์เรย์ไปยังกล่องโต้ตอบ
window.showModalDialog("test2.htm",mxh1)
// ส่งวัตถุหน้าต่างไปยังกล่องโต้ตอบ
window.showModalDialog("test3.htm",mxh2)
</script>
test2.htm
-
<สคริปต์>
var a = window.dialogArguments
alert("พารามิเตอร์ที่คุณส่งคือ: " + a)
</script>
test3.htm
-
<สคริปต์>
var a = window.dialogArguments
alert("พารามิเตอร์ที่คุณส่งเป็นวัตถุหน้าต่างชื่อ: " + a.name)
</สคริปต์>
ข้อมูลสามารถส่งคืนไปยังหน้าต่างที่เปิดกล่องโต้ตอบผ่าน window.returnValue และแน่นอนว่าสามารถเป็นวัตถุได้เช่นกัน ตัวอย่างเช่น:
รหัสโปรแกรม
test4.htm
-
<สคริปต์>
var a = window.showModalDialog("test5.htm")
สำหรับ (i=0;i<a.length;i++) การแจ้งเตือน(a[i])
</script>
test5.htm
-
<สคริปต์>
ฟังก์ชั่น sendTo()
-
var a=อาร์เรย์ใหม่("a", "b")
window.returnValue = ก
หน้าต่าง.ปิด()
-
</สคริปต์>
<ร่างกาย>
<แบบฟอร์ม>
<input value="Return" type=button onclick="sendTo()">
</แบบฟอร์ม>
คำถามที่พบบ่อย:
1. จะส่งในกล่องโต้ตอบโมดอลโดยไม่ต้องเปิดหน้าต่างใหม่ได้อย่างไร
หากเบราว์เซอร์ของคุณคือ IE5.5+ คุณสามารถใช้ iframe พร้อมแอตทริบิวต์ชื่อในกล่องโต้ตอบ และคุณสามารถกำหนดเป้าหมายให้เป็นชื่อของ iframe เมื่อส่งได้ สำหรับ IE4+ คุณสามารถใช้เฟรมที่มีความสูง 0 ได้ เช่น
โค้ดโปรแกรม
test6.htm
-
<สคริปต์>
window.showModalDialog("test7.htm")
</สคริปต์>
test7.htm
-
ถ้า (window.location.search) การแจ้งเตือน (window.location.search)
<frameset rows="0,*">
<frame src="/blog/about:blank">
<frame src="test8.htm">
</frameset>
test8.htm
-
<รูปแบบเป้าหมาย = "_self" วิธีการ = "get">
<ชื่ออินพุต=ค่า txt="ทดสอบ">
<ประเภทอินพุต=ส่ง>
</แบบฟอร์ม>
<สคริปต์>
ถ้า (window.location.search) การแจ้งเตือน (window.location.search)
</script>
2. สามารถส่งพารามิเตอร์โดยตรงไปยังกล่องโต้ตอบผ่าน http://servername/virtualdirname/test.htm?name=mxh ?
คำตอบคือไม่ แต่ก็เป็นไปได้ในกรอบ