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

หรือ

- ทั้งสองแนวทางนี้ถูกต้อง

เบราว์เซอร์ที่รองรับ (Chrome 37+ และ Opera 27+) จะแสดงองค์ประกอบตามค่าเริ่มต้น

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

Var $accountDelete = $("#delete-account"), $accountDeleteDialog = $("#confirm-delete");

$accountDelete.on("คลิก", ​​function() ( $accountDeleteDialog.showModal(); ));

$("#cancel").on("คลิก", ​​function() ( $accountDeleteDialog.close(); ));

ความแตกต่างระหว่างเมธอด show() และ showModal()

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

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

ตำแหน่งสัมพัทธ์

(ตำแหน่งสัมพัทธ์) และล้นไปยังองค์ประกอบหลัก

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

อีกทั้งเมื่อมีธาตุ

แสดงโดยเมธอด showModal() เรามีองค์ประกอบหลอกเพิ่มเติม::ฉากหลังให้เลือกใช้ องค์ประกอบหลอกนี้จะอยู่ใต้กล่องโต้ตอบโดยตรง ซึ่งครอบคลุมวิวพอร์ตทั้งหมด

มันถูกใช้เป็นพื้นหลังสีเข้มโปร่งใส - คลิกที่ปุ่มสีแดงเพื่อดูการทำงาน:

เพิ่มความสง่างามด้วยการเปลี่ยนผ่าน

การปรับแต่งสไตล์กล่องโต้ตอบควรจะเป็นเรื่องง่าย แต่จะเป็นอย่างไร เพิ่ม CSSการเปลี่ยนแปลง? แล้วการเปิดหน้าต่างอย่างราบรื่นโดยใช้เอฟเฟกต์การซูมเหมือนกับที่ OS X ทำล่ะ

ขั้นตอนที่ 1

ในการเริ่มต้น เราจะปรับขนาดกล่องโต้ตอบลง 90% ใช้การเปลี่ยนภาพ และซ่อนหน้าต่างให้พ้นสายตา

กล่องโต้ตอบ ( การมองเห็น: ซ่อนอยู่; การแปลง: ขนาด (0.1); การเปลี่ยนแปลง: การแปลง 200ms; )

ขั้นตอนที่ 2

ตอนนี้เรากำหนดคลาสที่จะปรับขนาดกล่องโต้ตอบ ขนาดจริงและทำให้มันมองเห็นได้

Dialog.dialog-scale ( การมองเห็น: มองเห็นได้; แปลง: ขนาด (1); )

ขั้นตอนที่ 3

เคล็ดลับของเราคือการ "หน่วงเวลา" กล่องโต้ตอบขนาดเล็กสักสองสามมิลลิวินาทีก่อนที่จะเพิ่มคลาสกล่องโต้ตอบขนาด เพื่อให้บรรลุเป้าหมายนี้ เราจึงเพิ่มคลาสโดยใช้เมธอด js setTimeout():

การเปลี่ยนแปลงแบบ Var; $accountDelete.on("คลิก", ​​function() ( $accountDeleteDialog.showModal(); transition = setTimeout(function() ( $accountDeleteDialog.addClass("dialog-scale"); ), 0.5); ));

ขั้นตอนที่ 4

อย่าลืมลบคลาสนี้และล้างการหมดเวลาเมื่อปิดกล่องโต้ตอบ

$("#cancel").on("คลิก", ​​function() ( $accountDeleteDialog.close(); $accountDeleteDialog.removeClass("dialog-scale"); clearTimeout(การเปลี่ยนแปลง); ));

นั่นคือทั้งหมด! ผลลัพธ์สามารถเห็นได้ในการสาธิตต่อไปนี้:

เพื่อสรุปมันขึ้นมา

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

http://caniuse.com/#feat=dialog

ในระหว่างนี้ คุณสามารถใช้ polyfil ของ Google Chrome เพื่อจำลองพฤติกรรมนี้ในเบราว์เซอร์ที่ยังไม่รองรับ

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

" ตอนนี้เราสามารถสร้างหน้าต่างเหล่านี้โดยใช้ HTML5 ล้วนๆ ได้

มาร์กอัปธรรมดาที่ไม่มีสไตล์

องค์ประกอบ<บทสนทนา> สามารถวางไว้ที่ใดก็ได้ภายในแท็ก body บนหน้า HTML ไม่แนะนำให้วางไว้ในย่อหน้าข้อความ -

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

> กรุณาอ่านของเรา > ข้อกำหนดในการให้บริการ > .>

เงื่อนไขการให้บริการ...
>
> …>

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

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

การจัดการกล่องโต้ตอบด้วย JavaScript

เพื่อเปิดและปิดองค์ประกอบ<บทสนทนา>การใช้งาน วิธีการจาวาสคริปต์ แสดง()และ ปิด().

document.getElementsByTagName ("span" ) [ 0 ] .addEventListener ( "คลิก" , ฟังก์ชัน () (
document.getElementsByTagName("โต้ตอบ")[0].show();
) , เท็จ ) ;

Document.getElementsByTagName ("dialog" ) [ 0 ] .addEventListener ( "คลิก" , ฟังก์ชัน () (
นี้.ปิด();
) , เท็จ ) ;

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

แบบฟอร์มภายในองค์ประกอบกล่องโต้ตอบ

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

>
> เงื่อนไขการให้บริการของเรา... >

ยอมรับ >
ปฏิเสธ >
>
>

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

ปฏิกิริยาต่อการปิดกล่องโต้ตอบ

เหตุการณ์ "ปิด"ช่วยให้เราตอบสนองเมื่อปิดกล่องโต้ตอบ

document.getElementsByTagName ("โต้ตอบ" ) [ 0 ] .addEventListener ( "ปิด" , ฟังก์ชั่น (e) (
คำตอบ var = นี่ .returnValue ;
) , เท็จ ) ;

คุณสมบัติ "มูลค่าผลตอบแทน"ผลตอบแทน "ค่า"- ค่าของปุ่มที่ใช้ปิดหน้าต่าง หากในตัวอย่างของเรามีการคลิกปุ่ม "ปฏิเสธ" “มูลค่าผลตอบแทน”จะส่งคืนค่า "no" (value="no"). Это дает нам простой способ инициирования определенных функций в зависимости от нажатой кнопки.!}

การสร้างกล่องโต้ตอบ Modal

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

document.getElementsByTagName("กล่องโต้ตอบ")[0].showModal();

ไม่เหมือนกับกล่องโต้ตอบมาตรฐาน ตัวเลือกโมดอลจะไม่เพียงแต่อยู่ตรงกลางในแนวนอนเท่านั้น แต่ยังรวมถึงแนวตั้งด้วย

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

โต้ตอบ: :ฉากหลัง (
พื้นหลัง : RGBA(255 , 0 , 255 , 0.25 ) ;
}

ในตัวอย่างของเรา เราตัดสินใจใช้สีเหลืองอ่อน หากคุณต้องการคุณสามารถเลือกได้ ภาพพื้นหลังแทนสี

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

document.getElementsByTagName ("โต้ตอบ" ) [ 0 ] .addEventListener ( "ยกเลิก" , ฟังก์ชั่น (e) (
คำตอบ var = "ยกเลิก" ;
) , เท็จ ) ;

การใช้องค์ประกอบ Dialog มากกว่าหนึ่งรายการบนเพจ

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

รองรับเบราว์เซอร์

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

หากคุณมีคำถามใด ๆ เราขอแนะนำให้ใช้ของเรา

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

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

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

มาร์กอัป HTML

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

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

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

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

เอ็กซ์

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

ตัวอย่างของหน้าต่างโมดอลอย่างง่ายที่สามารถสร้างได้โดยใช้ 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 ( จอแสดงผล: บล็อก; ตัวชี้เหตุการณ์: auto; ) .modalDialog > div ( ความกว้าง: 400px; ตำแหน่ง: ญาติ; ระยะขอบ: 10% อัตโนมัติ; การขยาย: 5px 20px 13px 20px; รัศมีเส้นขอบ: 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; )

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

องค์ประกอบกล่องโต้ตอบ 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

ป้อนค่า

คุณสมบัติ returnValueส่ง

document.querySelector("#close").onclick = function() ( var value = document.querySelector("#return_value").value; dial.close(value); ); document.querySelector("dialog").addEventListener("ปิด", function() ( alert(this.returnValue); ))

ป้อนข้อความ

ส่งบทสนทนาแบบเปิด

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

องค์ประกอบ

และคุณไม่จำเป็นต้องเชื่อมต่อไลบรารีของบุคคลที่สามเพื่อสร้างกล่องโต้ตอบป๊อปอัป

ยังดีสำหรับการเข้าถึงอีกด้วย เบราว์เซอร์เข้าใจว่าองค์ประกอบนั้น

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

ตำแหน่ง

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

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

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

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

หากกล่องโต้ตอบไม่ใช่โมดอล กล่องโต้ตอบเหล่านั้นจะทำงานเหมือนหลายองค์ประกอบ

- สำหรับกิริยา

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

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

ก่อนหน้านี้ เพื่อสร้างกล่องโต้ตอบที่คุณต้องเชื่อมต่อ ปลั๊กอิน jQueryเช่น Pop Easy, Twitter Bootstrap Modal หรือ jQuery UI Dialog อย่างไรก็ตาม HTML 5 ซึ่งขณะนี้มีความสามารถเพิ่มขึ้นอย่างมาก ช่วยให้คุณสามารถหลีกเลี่ยงการใช้มันได้โดยใช้องค์ประกอบในตัวที่เรียกว่า

.

ย้อนกลับไปก่อนหน้านี้ในปี 2009 องค์ประกอบนี้ถูกรวมไว้ใน HTML 5 แล้ว แต่ถูกแยกออกจากมัน ตอนนี้เขากลับมาอีกครั้งในรูปแบบใหม่

การสนับสนุนองค์ประกอบ

เบราว์เซอร์

น่าเสียดายที่เมื่อ ในขณะนี้การสนับสนุนมีจำกัดมาก ใช้ได้เฉพาะใน Safari 6.0 และ Chrome Canary เท่านั้น อย่างไรก็ตาม ใน Chrome Canary คุณต้องเปิดใช้งานในการตั้งค่าก่อน ในการดำเนินการนี้ ให้ไปที่ chrome://flags และเปิดใช้งาน “เปิดใช้งานคุณสมบัติแพลตฟอร์มเว็บทดลอง”.

การโต้ตอบกับ HTMLDialogElement

วิธีการ:

HTMLDialogElement มี วิธีการดังต่อไปนี้ช่วยให้คุณสามารถทำงานกับกล่องโต้ตอบได้

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

คุณสมบัติ:

HTMLDialogElement มีคุณลักษณะสองประการต่อไปนี้

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

กิจกรรม:

ฟังก์ชั่นที่ถูกเรียกเมื่อปิด onk มีลักษณะดังนี้:

Dialog.addEventListener("close", function() ( ที่นี่คุณสามารถเขียนโค้ดที่จะดำเนินการได้หากหน้าต่างถูกปิด ));

นอกเหนือจากวิธีการและคุณลักษณะที่กล่าวมาข้างต้นแล้ว

ยังรองรับ:

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

ตอนนี้คุณได้เรียนรู้พื้นฐานแล้ว

คุณสามารถดูตัวอย่างการใช้งานได้จริง

ไวยากรณ์สำหรับการสร้างกล่องโต้ตอบ

ขอบคุณ Hevix สำหรับบทเรียนที่ยอดเยี่ยม;)

ปิด

เปิดหน้าต่าง

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

และการเรียกต้องอยู่นอกแท็กนี้

เพื่อแสดงเนื้อหาขององค์ประกอบ

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

(function() ( var dial = document.getElementById("Dialog"); document.getElementById("showDialog").onclick = function() ( Dialog.show(); ); document.getElementById("closeDialog").onclick = ฟังก์ชั่น() ( Dialog.close(); ))();

(การทำงาน() ( เอกสาร. getElementById("showDialog"). onclick = ฟังก์ชั่น () ( กล่องโต้ตอบ แสดง(); เอกสาร. getElementById("closeDialog"). onclick = ฟังก์ชั่น () ( กล่องโต้ตอบ ปิด(); } ) () ;

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

กล่องโต้ตอบสไตล์

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

กล่องโต้ตอบ (ด้านบน: 28%; ความกว้าง: 400px; เส้นขอบ: 1px ทึบ rgba (0, 0, 0, 0.3); รัศมีเส้นขอบ: 15px; กล่องเงา: 0 3px 7px rgba (0, 0, 0, 0.3); ขอบบน: 5px solid #eb9816; ) ปุ่ม (แสดง: inline-block; border-radius: 3px; border: none; ขนาดตัวอักษร: 0.9rem; padding: 0.4rem 0.8em; พื้นหลัง: #eb9816; border-bottom : 1px solid #f1b75c; Font-weight: ตัวหนา; ระยะขอบ: 0 0.25rem; ปุ่ม: โฮเวอร์, ปุ่ม: โฟกัส ( ความทึบ: 0.92; เคอร์เซอร์: ตัวชี้; )

กล่องโต้ตอบ ( ด้านบน: 28%; ความกว้าง: 400px; เส้นขอบ : 1px rgba ทึบ (0, 0, 0, 0.3 ) ; รัศมีเส้นขอบ: 15px; กล่องเงา : 0 3px 7px rgba (0, 0, 0, 0.3 ); ขอบบน : 5px solid #eb9816 ; ปุ่ม( จอแสดงผล: อินไลน์บล็อก; รัศมีเส้นขอบ: 3px; เส้นขอบ: ไม่มี; ขนาดตัวอักษร: 0.9rem; ช่องว่างภายใน: 0.4rem 0.8em; พื้นหลัง : #eb9816 ; ขอบล่าง : 1px solid #f1b75c ; สี : ขาว ; น้ำหนักตัวอักษร: ตัวหนา; ระยะขอบ : 0 0.25rem ; การจัดแนวข้อความ: กึ่งกลาง; ปุ่ม:โฮเวอร์, ปุ่ม:โฟกัส ( ความทึบ: 0.92; เคอร์เซอร์: ตัวชี้;

การสร้างกล่องโต้ตอบ Modal

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

(function() ( var dial = document.getElementById("Dialog"); document.getElementById("showDialog").onclick = function() ( Dialog.showModal(); ); document.getElementById("closeDialog").onclick = ฟังก์ชั่น() ( Dialog.close(); ))();

(การทำงาน() ( var โต้ตอบ = เอกสาร getElementById("กล่องโต้ตอบ");