หน้าต่างโมดอลเป็นเครื่องมือที่ใช้บ่อยในคลังแสงของผู้ดูแลเว็บ เหมาะแก่การแก้เหงามาก ปริมาณมากงานต่างๆ เช่น การแสดงแบบฟอร์มลงทะเบียน หน่วยโฆษณา ข้อความ และอื่นๆ

แต่อย่างไรก็ตาม สถานที่สำคัญวี การสนับสนุนข้อมูลโปรเจ็กต์ หน้าต่างโมดอลมักจะถูกนำมาใช้ใน JavaScript ซึ่งสามารถสร้างปัญหาเมื่อขยายฟังก์ชันการทำงานหรือรับประกันความเข้ากันได้แบบย้อนหลัง

HTML5 และ CSS3 ทำให้การสร้างหน้าต่างโมดอลเป็นเรื่องง่ายอย่างเหลือเชื่อ

มาร์กอัป HTML

ขั้นตอนแรกในการสร้างหน้าต่างโมดอลคือการมาร์กอัปที่เรียบง่ายและมีประสิทธิภาพ:

เปิดหน้าต่างโมดอล

ภายในองค์ประกอบ div เนื้อหาของหน้าต่างโมดอลถูกวางไว้ คุณต้องระบุลิงก์เพื่อปิดหน้าต่างด้วย ตัวอย่างเช่น ตั้งชื่อเรื่องธรรมดาและหลายย่อหน้า มาร์กอัปที่สมบูรณ์สำหรับตัวอย่างของเราจะเป็นดังนี้:

เปิดหน้าต่างโมดอล X หน้าต่างโมดอล

ตัวอย่างของหน้าต่างโมดอลอย่างง่ายที่สามารถสร้างได้โดยใช้ CSS3

มันสามารถนำมาใช้ใน หลากหลายโดยเริ่มจากการแสดงข้อความและลงท้ายด้วยแบบฟอร์มลงทะเบียน

สไตล์

สร้างชั้นเรียน โมดอลไดอะล็อกและเริ่มก่อตัว รูปร่าง:

ModalDialog (ตำแหน่ง: คงที่; ตระกูลแบบอักษร: Arial, Helvetica, sans-serif; ด้านบน: 0; ขวา: 0; ด้านล่าง: 0; ซ้าย: 0; พื้นหลัง: rgba (0,0,0,0.8); ดัชนี z : 99999; -webkit-transition: ความทึบแสง 400ms; -moz-transition: ความทึบแสง 400ms ความง่ายในการแสดงผล: ไม่มี;

หน้าต่างของเราจะมีตำแหน่งคงที่นั่นคือมันจะเลื่อนลงหากคุณเลื่อนหน้าเมื่อใด เปิดหน้าต่าง- นอกจากนี้พื้นหลังสีดำของเราจะขยายให้เต็มทั้งหน้าจอ

พื้นหลังจะมีความโปร่งใสเล็กน้อยและจะถูกวางไว้เหนือองค์ประกอบอื่นๆ ทั้งหมดผ่านการใช้คุณสมบัติ ดัชนี z.

สุดท้าย เราตั้งค่าช่วงการเปลี่ยนภาพสำหรับการแสดงหน้าต่างโมดอลของเรา และซ่อนไว้ในสถานะไม่ใช้งาน

บางทีคุณอาจไม่รู้จักทรัพย์สิน ตัวชี้เหตุการณ์แต่ช่วยให้คุณควบคุมได้ว่าองค์ประกอบจะตอบสนองต่อการคลิกเมาส์อย่างไร เราตั้งค่าเป็นค่าของมันสำหรับชั้นเรียน โมดอลไดอะล็อกเนื่องจากลิงก์ไม่ควรตอบสนองต่อการคลิกเมาส์เมื่อคลาสหลอกทำงานอยู่ ":เป้า".

ตอนนี้เราเพิ่มคลาสหลอก :เป้าและสไตล์สำหรับหน้าต่างโมดอล

ModalDialog:target ( จอแสดงผล: block; pointer-events: auto; ) .modalDialog > div ( width: 400px; ตำแหน่ง: สัมพันธ์; ระยะขอบ: 10% อัตโนมัติ; padding: 5px 20px 13px 20px; border-radius: 10px; พื้นหลัง: # fff; พื้นหลัง: -moz-linear-gradient(#fff, #999); พื้นหลัง: -webkit-linear-gradient(#fff, #999); )

คลาสหลอก เป้าเปลี่ยนโหมดเอาต์พุตขององค์ประกอบดังนั้นของเรา หน้าต่างกิริยาช่วยจะแสดงเมื่อคุณคลิกที่ลิงค์ เรายังเปลี่ยนมูลค่าทรัพย์สิน ตัวชี้เหตุการณ์.

เรากำหนดความกว้างและตำแหน่งของหน้าต่างโมดอลบนเพจ นอกจากนี้เรายังกำหนดการไล่ระดับสีสำหรับพื้นหลังและมุมโค้งมน

กำลังปิดหน้าต่าง

ตอนนี้เราจำเป็นต้องใช้ฟังก์ชันการปิดหน้าต่าง การสร้างรูปลักษณ์ของปุ่ม:

ปิด ( พื้นหลัง: #606061; สี: #FFFFFF; ความสูงบรรทัด: 25px; ตำแหน่ง: สัมบูรณ์; ขวา: -12px; การจัดตำแหน่งข้อความ: กึ่งกลาง; ด้านบน: -10px; ความกว้าง: 24px; การตกแต่งข้อความ: ไม่มี; แบบอักษร- น้ำหนัก: ตัวหนา -webkit-border-radius: 12px; -moz-border-radius: 12px; -moz-box-shadow: 1px 3px #000; :โฮเวอร์ ( พื้นหลัง: #00d9ff; )

สำหรับปุ่มของเรา เราได้ตั้งค่าพื้นหลังและตำแหน่งข้อความ จากนั้นเราวางตำแหน่งปุ่ม ทำให้มันกลมโดยใช้คุณสมบัติการปัดเศษของเฟรม และสร้างเงาแสง เมื่อคุณวางเมาส์ไว้เหนือปุ่ม เราจะเปลี่ยนสีพื้นหลัง

องค์ประกอบ (จากภาษาอังกฤษ. กล่องโต้ตอบ- กล่องโต้ตอบ) สร้างกล่องโต้ตอบที่คุณสามารถแสดงข้อความหรือแบบฟอร์มเพื่อเข้าสู่ไซต์ได้

กล่องโต้ตอบจะปรากฏขึ้นพร้อมกับสไตล์ที่กำหนดไว้ล่วงหน้าดังต่อไปนี้

ตำแหน่ง: แน่นอน; ซ้าย: 0; ขวา: 0; ระยะขอบ: อัตโนมัติ; เส้นขอบ: ทึบ; ช่องว่างภายใน: 1em; พื้นหลัง:สีขาว; สีดำ;

ซึ่งจะแสดงกล่องโต้ตอบที่มีพื้นหลังสีขาว ขอบสีดำ และอยู่ตรงกลางแกนนอน ความกว้างจะเหมือนกับความกว้างของคอนเทนเนอร์หลัก

หากต้องการแสดงและซ่อนกล่องโต้ตอบ ให้ใช้เมธอด show() และ close() ตามลำดับ ดังแสดงในตัวอย่างด้านล่าง นอกจากนี้ กล่องโต้ตอบสามารถเปลี่ยนเป็นหน้าต่างโมดอลได้โดยใช้เมธอด showModal() แทน show() ในกรณีนี้ องค์ประกอบอื่นๆ บนเพจถูกบล็อก - ไม่สามารถเลือกข้อความได้ และไม่สามารถคลิกปุ่มได้จนกว่ากล่องโต้ตอบจะปิด คุณยังสามารถปิดหน้าต่างโมดอลได้ ปุ่ม Esc.

ไวยากรณ์

...

แท็กปิด

ที่จำเป็น.

ตัวอย่าง

เนื้อความของกล่องโต้ตอบ ( พื้นหลัง: url(/example/image/shark.jpg) ไม่ซ้ำ; ขนาดพื้นหลัง: ฝาครอบ; ) กล่องโต้ตอบ ( พื้นหลัง: rgba (255, 255, 255, 0.7); ความกว้าง: 300px; กล่องเงา: 0 0 5px rgba(0, 0, 0, 0.5); รัศมีเส้นขอบ: 5px ) เปิดหน้าต่าง

ชาวโพลีนีเซียนเรียกทางช้างเผือกว่า Mango-Roa-I-Ata ซึ่งแปลว่า "ฉลามยาวตอนรุ่งสาง" ในภาษาเมารี

ปิดหน้าต่าง

var โต้ตอบ = document.querySelector("โต้ตอบ"); document.querySelector("#openDialog").onclick = function() ( Dialog.show(); // แสดงกล่องโต้ตอบ) document.querySelector("#closeDialog").onclick = function() ( Dialog.close() ; // ซ่อนกล่องโต้ตอบ)

ผลลัพธ์ ตัวอย่างนี้แสดงในรูปที่. 1. เมื่อคุณคลิกที่ปุ่ม "เปิดหน้าต่าง" เนื้อหาขององค์ประกอบจะปรากฏขึ้นซึ่งก่อนหน้านี้จะมองไม่เห็น การคลิกปุ่ม "ปิดหน้าต่าง" จะซ่อนกล่องโต้ตอบ

ข้าว. 1. มุมมองหน้าต่างโต้ตอบ

ข้อมูลจำเพาะ

ข้อมูลจำเพาะแต่ละอย่างต้องผ่านการอนุมัติหลายขั้นตอน

• คำแนะนำ - ข้อมูลจำเพาะได้รับการอนุมัติจาก W3C และแนะนำให้ใช้เป็นมาตรฐาน
• คำแนะนำผู้สมัคร ( คำแนะนำที่เป็นไปได้) - กลุ่มที่รับผิดชอบมาตรฐานมีความพึงพอใจว่าบรรลุเป้าหมาย แต่ต้องการความช่วยเหลือจากชุมชนการพัฒนาเพื่อนำมาตรฐานไปใช้
• คำแนะนำที่เสนอ - ในขั้นตอนนี้ เอกสารจะถูกส่งไปยังสภาที่ปรึกษา W3C เพื่อขออนุมัติขั้นสุดท้าย
• Working Draft - ฉบับร่างฉบับสมบูรณ์ยิ่งขึ้นที่ได้รับการหารือและแก้ไขเพื่อการตรวจสอบของชุมชน
• ร่างบรรณาธิการ (ฉบับร่างบรรณาธิการ) - ฉบับร่างของมาตรฐานหลังจากแก้ไขโดยบรรณาธิการโครงการ
• แบบร่าง (ข้อกำหนดแบบร่าง) - เวอร์ชันร่างแรกของมาตรฐาน

มาตรฐาน HTML ที่มีชีวิต (Living) มีความโดดเด่น - ไม่ยึดติดกับการกำหนดหมายเลขเวอร์ชันดั้งเดิม เนื่องจากมีการพัฒนาอย่างต่อเนื่องและได้รับการอัปเดตเป็นประจำ

หน้าต่างโมดอลที่มีฟังก์ชั่นเรียบง่ายซึ่งสร้างขึ้นใน CSS ล้วนๆ ซึ่งคุณสามารถใส่ลงไปได้ ฟังก์ชั่นที่แตกต่างกันเพื่อโทรไปที่ไซต์ นี่อาจเป็นหนึ่งในหลาย ๆ หน้าต่างที่ฉันเจอจากตัวเลือกหน้าต่างโมดอลทั้งในแง่ของการตั้งค่า แต่ยังรวมถึงในแง่ของการติดตั้งด้วย แต่สิ่งสำคัญคือฟังก์ชันการทำงานซึ่งจะไม่ด้อยกว่าผู้อื่น นอกจากนี้โดยค่าเริ่มต้นจะทำในที่ร่มสีอ่อนซึ่งอยู่ทางด้านขวา มุมบนมีปุ่มติดตั้งเป็นรูปกากบาท

ซึ่งจะใช้ในการปิดการใช้งานฟังก์ชั่นหรือเพียงแค่ทำให้เฟรมหายไปซึ่งแม้แต่ในองค์ประกอบเล็ก ๆ นี้ก็ยังมีผลกระทบจากการเปลี่ยนจานสีอีกด้วย ตอนนี้เว็บมาสเตอร์สามารถใส่มันลงบนเว็บไซต์แล้วใส่คำอธิบายหรือโอเปอเรเตอร์ลงไป ซึ่งสามารถแสดงหมวดหมู่ต่างๆ เช่น สถิติ หรือผู้แจ้งข้อมูลได้

แต่ประเด็นคือถ้าคุณมีรูปแบบทรัพยากรที่มืด ในรูปแบบคุณสามารถเปลี่ยนแกมม่าได้อย่างรวดเร็วหรือปรับให้เข้ากับ การออกแบบดั้งเดิม- นี่คือหนึ่งใน วิธีการมาตรฐานทำอย่างไร CSS บริสุทธิ์ไปยังหน้าต่างโมดอลที่จะเปิดตัวเมื่อมีการคลิกปุ่มใต้ลิงก์ที่มีการผูก HTML ตัวปุ่มนั้นมีไว้เพื่อการมองเห็นมากกว่า โดยที่ในรูปแบบการลบคลาสหนึ่งออก ชื่อจะยังคงอยู่ ซึ่งสามารถวางไว้ในการนำทางหรือในแผงควบคุมซึ่งมีฟังก์ชันหลักหรือการนำทางไซต์อยู่

นี่คือการตรวจสอบว่าทุกอย่างทำงานได้ดี:

มาเริ่มการติดตั้งกัน:

หน้าต่างที่มีปุ่ม

ZorNet.Ru - พอร์ทัลผู้ดูแลเว็บ×
ที่นี่คุณจะพบเนื้อหาในหัวข้อสำหรับไซต์

ซีเอสเอส

บุคสะตอน-สะโตกะเวต (
จอแสดงผล: อินไลน์บล็อก;
การตกแต่งข้อความ: ไม่มี;
ขอบขวา: 7px;
รัศมีเส้นขอบ: 5px;
ช่องว่างภายใน: 7px 9px;
พื้นหลัง: #199a36;
สี: #fbf7f7 !สำคัญ;
}

อเนลูเมน (
จอแสดงผล: ดิ้น;
ตำแหน่ง: คงที่;
ซ้าย: 0;
ด้านบน: -100%;
ความกว้าง: 100%;
ความสูง: 100%;
จัดรายการ: กึ่งกลาง;
ปรับเนื้อหา: กึ่งกลาง;
ความทึบ: 0;
-webkit-transition: 0 อันดับแรก .7s, ความทึบ .7s 0s;
การเปลี่ยนแปลง: 0s สูงสุด .7s, ความทึบ .7s 0s;
}

อนุสาวรีย์:เป้าหมาย (
ด้านบน: 0;
ความทึบ: 1;
-webkit-การเปลี่ยนแปลง: ไม่มี;
การเปลี่ยนแปลง: ไม่มี;
}

ฟิกเกอร์อะลูเมน (
ความกว้าง: 100%;
ความกว้างสูงสุด: 530px;
ตำแหน่ง: ญาติ;
ช่องว่างภายใน: 1.8em;
ความทึบ: 0;
สีพื้นหลัง: สีขาว;
-webkit-การเปลี่ยนแปลง: ความทึบ .7s;
การเปลี่ยนแปลง: ความทึบ .7s;
}

ฟิกเกอร์ Anelumen.lowingnuska (
พื้นหลัง: #f9f5f5;
รัศมีเส้นขอบ: 7px;
ช่องว่างด้านบน: 8px;
เส้นขอบ: 3px ทึบ #aaabad;
}

Anelumen.lowingnuska รูปที่ h2 (
ขอบด้านบน: 0;
ช่องว่างภายใน: 3px;
ขอบล่าง: 1px solid #dcd7d7;
}

Anelumen:รูปเป้าหมาย (
ความทึบ: 1;
}

Anelumen.lowingnuska.compatibg-ukastywise (
การตกแต่งข้อความ: ไม่มี;
ตำแหน่ง: แน่นอน;
ขวา: 8px;
ด้านบน: 0px;
ขนาดตัวอักษร: 41px;
}

Anelumen.nedismiseg (
ซ้าย: 0;
ด้านบน: 0;
ความกว้าง: 100%;
ความสูง: 100%;
ตำแหน่ง: คงที่;
สีพื้นหลัง: rgba (10, 10, 10, 0.87);
เนื้อหา: "";
เคอร์เซอร์: ค่าเริ่มต้น;
การมองเห็น: ซ่อนเร้น;
-webkit-การเปลี่ยนแปลง: ทั้งหมด .7s;
การเปลี่ยนแปลง: ทั้งหมด .7s;
}

Anelumen:เป้าหมาย .nedismiseg (
การมองเห็น: มองเห็นได้;
}

คุณต้องรู้ด้วยว่าสไตล์ CSS และคลาสหลอกเป็นหนึ่งในนั้นที่ยังใช้งานไม่เต็มที่ คุณสมบัติซีเอสเอสพร้อมศักยภาพการใช้งานที่น่าสนใจมากมาย

มันเริ่มเมื่อ ที่อยู่ URLหน้าสอดคล้องกับตัวระบุองค์ประกอบ หรือคุณสามารถกล่าวอีกนัยหนึ่งได้ นั่นคือเมื่อผู้ใช้ข้ามไปยังองค์ประกอบเฉพาะบนหน้า

องค์ประกอบกล่องโต้ตอบ HTML5 มีฟังก์ชันการทำงานในกล่องโต้ตอบบนเว็บเพจ กล่องโต้ตอบขององค์ประกอบกล่องโต้ตอบจะอยู่ในแผนผัง DOM และสามารถจัดสไตล์ได้โดยใช้ CSS ทั่วไป

ตัวอย่างง่ายๆ ขององค์ประกอบกล่องโต้ตอบ หน้าต่างโต้ตอบ! องค์ประกอบกล่องโต้ตอบจะไม่แสดงสิ่งใดเลย คุณต้องใช้ JavaScript API เพื่อเปิดและปิดกล่องโต้ตอบ .show() และ .close() API การใช้ .show() และ .close() API บนองค์ประกอบ DOM ของกล่องโต้ตอบ คุณสามารถเปิดและปิดกล่องโต้ตอบได้

หน้าต่างสนทนา!

ปิด เปิดกล่องโต้ตอบ! var โต้ตอบ = document.querySelector("โต้ตอบ"); document.querySelector("#show").onclick = function() ( Dialog.show(); ); document.querySelector("#close").onclick = function() ( Dialog.close(); );

หน้าต่างสนทนา!

ปิดกล่องโต้ตอบเปิด!

สไตล์สำหรับกล่องโต้ตอบ คุณสามารถเพิ่มสไตล์ที่กำหนดเองให้กับองค์ประกอบกล่องโต้ตอบในลักษณะเดียวกับองค์ประกอบบล็อกอื่น ๆ เช่น nav, div, ส่วนท้าย ฯลฯ กล่องโต้ตอบ ( เส้นขอบ: 1px solid rgba (0, 0, 0, 0.3); border-radius: 6px; box-shadow: 0 3px 7px rgba (0, 0, 0, 0.3); )

การกำหนดสไตล์องค์ประกอบกล่องโต้ตอบนั้นง่ายพอๆ กับการกำหนดสไตล์ div!

ปิดกล่องโต้ตอบเปิดสไตล์

Function.showModal() API

หากต้องการสร้างโมดอลกล่องโต้ตอบ คุณต้องเรียกใช้ฟังก์ชัน .showModal() แทน .show() โปรดทราบว่าคุณไม่สามารถเลือกข้อความได้ พื้นหลังหรือคลิกปุ่มเพื่อเลือกปุ่มในกล่องโต้ตอบที่เปิดอยู่

Document.querySelector("#show").onclick = function() ( Dialog.showModal(); );

เลเยอร์นี้อยู่ด้านบนของหน้าต่างขององค์ประกอบอื่นๆ โดยไม่คำนึงถึงค่าดัชนี z รวมถึงโมดอลที่เปิดไว้ก่อนหน้านี้ กล่องโต้ตอบ.

หากจำเป็น คุณสามารถปิดกล่องโต้ตอบโมดอลได้โดยใช้ปุ่ม "escape"!

ปิด

เพิ่มพื้นหลังให้กับกล่องโต้ตอบ

หากต้องการเติมสีให้กับพื้นหลัง คุณสามารถใช้องค์ประกอบหลอก::ฉากหลังได้

กล่องโต้ตอบ :: ฉากหลัง ( ตำแหน่ง: คงที่; บน: 0; ซ้าย: 0; ขวา: 0; ล่าง: 0; สีพื้นหลัง: rgba (0, 0, 0, 0.8); )

พื้นหลังสลัวโดยใช้ ::backdrop มันไฮไลต์กล่องโต้ตอบในขณะที่ซ่อนส่วนที่เหลือ!

ปิดกล่องโต้ตอบเปิดที่มีพื้นหลัง

ส่งกลับค่าจากกล่องโต้ตอบ

คุณสามารถส่งผ่านข้อโต้แย้งไปที่ .close() กล่องโต้ตอบกลับมา ตั้งค่าคุณสมบัติ returnValue

เปิดบทสนทนา!

ส่ง เปิดบทสนทนา! document.querySelector("#close").onclick = function() ( var value = document.querySelector("#return_value").value; dial.close(value); ); document.querySelector("dialog").addEventListener("ปิด", function() ( alert(this.returnValue); ))

กล่องโต้ตอบได้รับอาร์กิวเมนต์ close() สิ่งนี้จะสะท้อนให้เห็นใน .returnValue

ส่ง เปิดกล่องโต้ตอบ ข้อดีขององค์ประกอบ แน่นอนคุณสามารถใช้ ไลบรารี jQueryหรือ JavaScript อื่น ๆ เพื่อให้ได้ผลลัพธ์นี้ แต่บทสนทนาก็คือ องค์ประกอบ HTMLและคุณไม่จำเป็นต้องเชื่อมต่อไลบรารีของบุคคลที่สามเพื่อสร้างกล่องโต้ตอบป๊อปอัป

องค์ประกอบนี้ยังยอดเยี่ยมสำหรับการเข้าถึงอีกด้วย เบราว์เซอร์เข้าใจว่าองค์ประกอบนั้นเป็นโมดอล ดังนั้นเทคโนโลยี เช่น โปรแกรมอ่านหน้าจอจึงรู้ว่าเนื้อหาใดควรเป็นแบบโต้ตอบ

นอกจากนี้ กล่องโต้ตอบโมดอลจะถูกจัดวางอย่างเป็นระเบียบในสแต็ก "ชั้นบนสุด" และอยู่ด้านบนขององค์ประกอบอื่นๆ โดยไม่คำนึงถึงคุณสมบัติดัชนี z การใช้ดัชนี z ทำให้การวางกล่องโต้ตอบโมดอลไว้ด้านบนของหน้าเว็บเป็นเรื่องยาก

ตำแหน่ง

บทสนทนามีลักษณะการวางตำแหน่งพิเศษบางประการ ตามค่าเริ่มต้น เมื่อคุณเรียก Dialog.show() กล่องโต้ตอบจะอยู่ตรงกลางวิวพอร์ต แน่นอนคุณสามารถเปลี่ยนแปลงได้โดยใช้การวางตำแหน่ง CSS ปกติ เช่น top: 15px

และคุณต้องรู้ด้วยว่า ตำแหน่งที่แน่นอนกล่องโต้ตอบ เฉพาะสำหรับบล็อกที่มีคอนเทนเนอร์เริ่มต้นเท่านั้น ดังนั้น กล่องโต้ตอบที่มีตำแหน่งสัมบูรณ์จะไม่เข้าใจสิ่งต่างๆ เช่น ตำแหน่ง โอเวอร์โฟลว์ และเปอร์เซ็นต์

ข้อมูลจำเพาะประกอบด้วยจุดยึดตำแหน่งที่ช่วยให้คุณสามารถยึดกล่องโต้ตอบกับองค์ประกอบอื่นได้ อย่างไรก็ตาม ยังไม่ได้นำมาใช้ใน Chrome

เปิดหน้าต่างโต้ตอบหลายหน้าต่าง

หากกล่องโต้ตอบไม่ใช่โมดอล กล่องโต้ตอบเหล่านั้นจะทำงานเหมือนหลายองค์ประกอบ สำหรับโมดอล เบราว์เซอร์จะพุชกล่องโต้ตอบลงบนสแต็ก ด้านบนของสแต็กคือกล่องโต้ตอบโมดอลที่ใช้งานอยู่ซึ่งจะบล็อกหน้าที่เหลือของเอกสาร เมื่อใดก็ตามที่เปิดกล่องโต้ตอบโมดอล กล่องโต้ตอบนั้นจะถูกผลักไปที่ด้านบนของสแต็ก เมื่อใดก็ตามที่ปิดกล่องโต้ตอบโมดอล กล่องโต้ตอบนั้นจะถูกลบออกจากสแต็ก กล่องโต้ตอบจะแสดงตามลำดับสแต็ก ดังนั้นกล่องโต้ตอบที่ใช้งานอยู่จึงสูงที่สุด