10 ปลั๊กอินหน้าต่าง Modal JavaScript ฟรี

คุณสามารถหา CSS modals แท้ๆ แต่สิ่งเหล่านี้ ไม่เสนอการควบคุมเดียวกับ JavaScript. ด้วย modal JavaScript คุณสามารถเพิ่มภาพเคลื่อนไหวที่กำหนดเองอินพุต UI และปรับปรุงประสบการณ์การใช้งานของผู้ใช้ได้อย่างแท้จริง.

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

ทั้งหมดนี้คือ สมบูรณ์ฟรีและโอเพนซอร์ส, เพื่อให้คุณสามารถแก้ไขรหัสและปรับให้เหมาะสมกับไซต์ของคุณได้ตามต้องการ.

1. ซ่า

หนึ่งในสคริปต์กิริยาฟรีที่ฉันชอบคือ Tingle.js. มัน สร้างขึ้นบน JavaScript วานิลลาโดยไม่มีการพึ่งพา, ดังนั้นคุณไม่จำเป็นต้องมีไลบรารี jQuery หรือ Zepto.

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

Tingle.js ถูกออกแบบมาให้เป็น เข้าถึงได้อย่างเต็มที่และตอบสนอง, ดังนั้นจึงสามารถใช้งานได้บนอุปกรณ์มือถือและรองรับเบราว์เซอร์รุ่นเก่าเช่นกัน.

คุณสามารถเห็น เอกสารทั้งหมดใน GitHub, พร้อมกับรหัสแหล่งที่มาฟรี พวกเขายังมีลิงค์สาธิตดังนั้นคุณสามารถ ตรวจสอบ Tingle ในการดำเนินการ เพื่อดูว่าเหมาะสมกับเว็บไซต์ของคุณหรือไม่.

2. วานิลลา Modal

นี่เป็นคำกริยาที่ฉันเพิ่งพบเมื่อไม่นานมานี้ มากทั้งง่ายกว่ามาก. วานิลลา Modal ย่อมาจากชื่อของมันด้วย สคริปต์วานิลลาบริสุทธิ์ เปิดพลังกิริยาพร้อมด้วย การเปลี่ยน CSS.

สิ่งนี้ค่อนข้างเล็กและมีความยืดหยุ่นสูงด้วย CSS ที่กำหนดเองเพื่อ restyle หน้าต่าง. อีกทั้งยังมี ตัวเลือกค่อนข้างน้อยที่คุณสามารถแก้ไขได้ด้วย JavaScript, ทำให้สมบูรณ์แบบสำหรับการใช้งานฟังก์ชั่น DOM หรือแม้กระทั่งฟังก์ชั่นการโทรกลับ.

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

3. ธรรมดารูปแบบ

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

มันทำ ไม่ใช้ไฟล์ CSS หรือไฟล์ภาพภายนอก. สคริปต์ JS เพียงหนึ่งเดียวคือสิ่งที่คุณต้องการ.

เมื่อเพิ่มสคริปต์ plainModal ในหน้าของคุณคุณก็แค่ กำหนดเป้าหมายปุ่ม modal และคุณก็พร้อมที่จะไป สิ่งนี้ทำให้คุณสามารถควบคุมการแสดงผลและจำนวนที่คุณต้องการเปลี่ยนอินเทอร์เฟซคำกริยา.

นอกจากนี้คุณสามารถ ตั้งค่าโมดอลด้วย JavaScript หนึ่งบรรทัด รักษาด้วยชุดรูปแบบ minimalist ของปลั๊กอินนี้.

4. Modaal

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

กับ Modaal, คุณจะได้รับประสบการณ์ที่สมบูรณ์แบบ ผ่านการทดสอบ WCAG 2.0 ด้วยระดับ AA ที่แข็งแกร่ง. คุณสามารถดูตัวอย่างที่ยอดเยี่ยมในหน้าหลักพร้อมกับเอกสารรหัสบางอย่าง.

โดยรวมแล้วฉันแนะนำปลั๊กอิน JavaScript ของ vanilla สำหรับทุกคนที่ใส่ใจเรื่องการเข้าถึงได้ง่าย. สามารถให้คะแนน AA ในบางโครงการของเว็บดังนั้น Modaal จึงเป็นสคริปต์ที่มีประโยชน์จริงๆในการเก็บบุ๊คมาร์คไว้.

5. สก๊อต JS Modal

ทีมพัฒนาที่ Scotch.io เผยแพร่บทเรียนและคำแนะนำสำหรับนักเขียนโค้ด งานของพวกเขาน่าเหลือเชื่อและมันแสดงให้เห็นจริงๆ สคริปต์คำสั่ง JavaScript นี้โฮสต์บน Scotch GitHub.

คำกริยานี้พัฒนาโดย Ken Wheeler และแม้แต่สคริปต์นี้ มีการสอนเต็มรูปแบบ ถ้าคุณต้องการเรียนรู้วิธีการทำงาน อย่างไรก็ตามรหัสฟรีควรจะเพียงพอสำหรับนักพัฒนาส่วนใหญ่ตั้งแต่นี้ น้ำหนักเบามากและติดตั้งง่าย. ไม่มีการอ้างอิงและแม้แต่ตัวอย่างตัวอย่างใน CodePen.

6. Bootbox.js

วิธีที่เร็วที่สุดที่จะ เปิดตัวโครงการเว็บใหม่ ผ่าน Bootstrap มันเป็นกรอบส่วนหน้าอันทรงพลังที่สนับสนุนให้นักพัฒนา สร้างส่วนเสริมของตนเองในไลบรารี.

ตัวอย่างหนึ่งคือ Bootbox.js, ไลบรารี JavaScript ขนาดเล็ก, ออกแบบมาเฉพาะสำหรับ modal windows ใน Bootstrap. มันจริง ทำงานบนกล่องโต้ตอบ ตำแหน่งที่ผู้ใช้สามารถคลิกตกลงหรือยกเลิกตามคำขอของคุณ.

กล่องโต้ตอบจาวาสคริปต์ทั่วไปนั้นน่ากลัวเหมือนกล่องเตือน สคริปต์ Bootbox นำเสนอ ทางเลือกที่มั่นคงสำหรับทุกคนที่ทำงานในระบบนิเวศ BS3 / BS4.

อีกครั้งมันเป็น ฟรีและโอเพ่นซอร์สทั้งหมด, พร้อมกับ หน้าเอกสารที่มีความยาว เพื่อให้คุณใช้งานได้อย่างรวดเร็ว.

7. iziModal.js

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

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

เพียงแค่ทราบปลั๊กอินนี้ ไม่ทำงานบน jQuery, ดังนั้นจึงเป็นหนึ่งในไม่กี่คนที่นี่ มีการพึ่งพา. แต่ถ้าคุณต้องการรูปแบบ iziModal มันเป็นราคาขนาดเล็กสำหรับจ่ายสำหรับหน้าต่างแบบ popover อันทันสมัย.

8. jQuery Modal

ปลั๊กอิน jQuery Modal อาจจะเป็น สคริปต์คำกริยาที่ง่ายที่สุดใน jQuery ที่คุณจะพบ.

สามารถตั้งโปรแกรมให้ ผูกกับองค์ประกอบ HTML บางอย่างโดยอัตโนมัติ ขึ้นอยู่กับคุณลักษณะต่างๆ มันยัง รองรับแป้นพิมพ์ลัด เช่น ESC สำหรับปิดหน้าต่าง.

โดยรวมแล้วปลั๊กอินนี้ มาตรการน้อยกว่า 1KB และมัน ทำงานได้ในทุกเบราว์เซอร์ที่เป็นไปได้ที่คุณสามารถจินตนาการได้. นักพัฒนา jQuery ควรเก็บปลั๊กอินนี้ไว้เพื่อให้สามารถเข้าถึงสคริปต์แบบง่าย ๆ ได้โดยไม่ต้องเพิ่มความพิเศษ.

9. PicoModal

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

มัน รองรับเบราว์เซอร์ที่ทันสมัยทั้งหมด, รวมถึงเบราว์เซอร์มือถือสำหรับ Android และ Mobile Safari สำหรับ iOS มันยังรองรับเบราว์เซอร์ IE รุ่นเก่าย้อนหลังไปถึง IE7!

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

10. Avgrund

Avgrund อาจเป็นหนึ่งใน modals ที่พิเศษที่สุดในรายการนี้ มันใช้ เอฟเฟ็กต์หน้าซีดจางที่กำหนดเองพร้อมกับภาพเคลื่อนไหวที่ลดขนาดลง เพื่อนำคำกริยาเข้ามาทางขวา.

ไม่ใช่ทุกคนที่จะชื่นชมภาพเคลื่อนไหวนี้ดังนั้นฉันไม่สามารถพูดได้ว่าสคริปต์นี้เหมาะกับทุกเว็บไซต์ แต่มันเป็น วานิลลาบริสุทธิ์ และติดตั้งง่ายสุด ๆ, มีเพียง CSS และไฟล์ JavaScriptอี.

ลองดูที่ หน้าตัวอย่าง เพื่อดูว่ามันทำงานอย่างไร มันมีสไตล์ที่เป็นเอกลักษณ์และแน่นอน ผูกพันที่จะดึงดูดความสนใจ ด้วยภาพเคลื่อนไหวที่กำหนดเองที่ใช้งานได้.

คำพูดสุดท้าย

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