iziModal.js - ปลั๊กอิน jQuery หน้าต่าง Modal แบบไดนามิกอย่างแท้จริง

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

มันเป็นหนึ่งในปลั๊กอินหน้าต่างโมดอลที่เก๋ที่สุดที่ฉันเคยเห็นและมันทำให้ฉันตื่นเต้นที่ได้มีปฏิสัมพันธ์กับโมดัลอีกครั้ง.

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

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

คุณสามารถหา ตัวอย่างมากมาย บน CodePen แต่ฉันชอบ การสาธิตโฮสต์บนหน้าแรกของ iziModal. โดยเฉพาะให้ตรวจสอบ ตัวเลือกการฝัง iframe มันอยู่ที่ไหน เล่นอัตโนมัติ Vimeo เข้าคิวใน modal.

การออกแบบมีความงดงามและเป็นกิริยาช่วยให้รู้สึกเหมือนมัน ส่วนหนึ่งของอินเตอร์เฟซ. คุณภาพของอนิเมชั่นก็น่าประทับใจเช่นกันและขับเคลื่อนด้วย CSS3 & jQuery.

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

 $ (เอกสาร) .on ('คลิก', '.trigger', ฟังก์ชัน (เหตุการณ์) event.preventDefault (); $ ('# modal'). iziModal ('open');); 

iziModal () ฟังก์ชั่นมี กว่า 45 ตัวเลือกที่แตกต่างกัน ที่สามารถส่งผ่านไปยัง ปรับแต่งหน้าต่าง modal. อีกทั้งยังมี เหตุการณ์ที่กำหนดเอง ที่สามารถ ฟังก์ชันทริกเกอร์ เช่นเมื่อ modal เปิดปิดหรือไปเต็มหน้าจอ.

นี่เป็นโครงการขนาดใหญ่อย่างไม่น่าเชื่อและเป็นหนึ่งในปลั๊กอินหน้าต่างโมดอลที่ชื่นชอบได้อย่างง่ายดายจาก มุมมองการออกแบบและการใช้งาน.

เพื่อคว้าสำเนาของแหล่งที่มาคุณสามารถทำได้ ดึงมันผ่าน npm หรือ ดาวน์โหลดจาก GitHub. และหากคุณมีข้อเสนอแนะเกี่ยวกับปลั๊กอินหรือเพียงแค่ต้องการแบ่งปันขอบคุณคุณสามารถทวีตผู้สร้าง Marcelo Dolce @marcelodolce.