GModal ถูกออกแบบมาเพื่อใช้แสดงเนื่อหากลางจอภาพ ในลักษณะ Popup เช่นกรอบ Login หรือกรอบ ขอรหัสผ่านใหม่ของเว็บนี้ ซึ่ง GModal สามารถแสดง HTML ทั่วไปภายในได้ไม่ว่าจะเป็น Form Div IFRAME แม้กระทั่ง VDO หรือ รูปภาพ

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

การเรียกใช้ GModal

var modal = new GModal(options);

options เป็นข้อมูลชนิด hash นะครับ มีค่าต่างๆดังนี้
id คือ class ของ พื้นที่แสดงผล GModal ค่าเริ่มต้นคือ modaldiv
btnclose คือ class ของปุ่มปิดที่แสดงบน GModal
onhide คือ event เมื่อมีคำสั่งปิด GModal (ก่อนปิดสำเร็จ)
onclose คือ event เมื่อมีคำสั่งปิด GModal เรียบร้อย

Properties ของ GModal
modal.show(value) ใช้สำหรับเริ่มต้นแสดง GModal โดยเนื้อหาที่จะแสดงใน GModal สามารถเป็นได้ทั้ง ข้อความ HTML รูปภาพ หรือ Flash
modal.hide() คำสั่งในการซ่อน GModal

การปิด GModal สามารถทำได้หลายวิธี เช่น กด Esc คลิกปุ่มปิด (btnclose) หรือเขียนคำสั่งเพื่อปิดก้ได้ครับ (modal.hide())
 
ตัวอย่าง 1

var modal = new GModal({onhide:function(){
 alert('modal close');
}});
modal1.show('<h1 style="font-size:30px; padding: 20px;">สวัสดีครับ</h1>');

ตัวอย่าง 2

var modal2 = new GModal();
modal2.show('<iframe src="https://www.goragod.com" width=800 height=600></iframe>');