หลายๆ ท่านที่เคยใช้งาน Bootstrap เป็น Frontend Framework น่าจะเคยใช้ modal กันมาบ้าง ซึ่ง modal เป็นจาวาสคลิปต์ปลั๊กอิน มีไว้สำหรับการแสดงผลข้อมูล ทั้งรูปภาพ ข้อความ หรือแบบฟอร์มรับข้อมูล ( html input form ) ในลักษณะป๊อปอัพ ซึ่ง modal ของ bootstrap สามารถแสดงผลได้หลายขนาด ทั้งแบบปกติ แบบเล็ก และแบบใหญ่ ขึ้นอยู่กับ class ที่เราสามารถระบุเพิ่มเข้าไปว่าต้องการให้แสดงผลเป็นแบบไหน
ตัวอย่างโค้ด modal dialog และปุ่มสำหรับเปิด modal
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
จะได้ผลลัพธ์ดังรูป
ถ้าต้องการให้ modal แสดงผลใหญ่ขึ้นหรือเล็กลง ให้ระบุ modal-lg modal-sm หลัง modal-dialog ดังตัวอย่าง
<div class="modal-dialog modal-lg" role="document">
<div class="modal-dialog modal-sm" role="document">
ถ้าเราต้องการให้ modal สามารถแสดงผลแบบเต็มจอ (full screen) จะไม่สามารถทำได้ (อ้างอิงจากเวอร์ชัน 3.3 ที่ผู้เขียนใช้งาน แต่จากการตรวจสอบล่าสุดพบว่าเวอร์ชัน 5.0 สามารถทำได้แล้ว)
แต่เราจะใช้ความรู้ในเรื่อง css มาปรับแต่งเพิ่มเติมเพื่อให้สามารถแสดงผลได้ตามความต้องการ โดยเราจะต้องเพิ่ม css class ที่ระบุคุณสมบัติที่จำเป็น ดังตัวอย่าง
<style>
.fullscreen {
margin: 0;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
</style>
ระบุ class fullscreen ไว้ด้านหลัง modal-dialog
<div class="modal-dialog fullscreen" role="document">modal จะได้แสดงผลเต็มจอดังรูป
และเพื่อให้การแสดงผล modal มีความยืดหยุ่นและมีการทำงานใกล้เคียงกับ dialog ของ Windows ทั่วไป คือสามารถขยายให้เป็น full screen และย่อให้กลับมาขนาดเท่าเดิม โดยสิ่งที่เราต้องทำเพิ่มคือ
- เพิ่มปุ่ม fullscreen
- เมื่อ modal แสดงผลอยู่ในสภาพปกติ
- เมื่อคลิกปุ่ม fullscreen จะเปลี่ยนการแสดงผล modal ให้เป็นแบบ fullscreen
- ซ่อนปุ่ม fullscreen และแสดงผลปุ่ม restore แทน
- เพิ่มปุ่ม restore
- เมื่อ modal แสดงผลในรูปแบบ fullscreen
- เมื่อคลิกปุ่ม restore จะเปลี่ยนการแสดงผล modal กลับไปเป็นสภาพปกติ
- ซ่อนปุ่ม restore และแสดงผลปุ่ม fullscreen แทน
โดยมีขั้นตอนดังต่อไปนี้
1. เพิ่มปุ่ม fullscreen และปุ่ม restore ใน div class=”modal header”
<div class="modal-header">
//ปุ่ม Close
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
//ปุ่ม restore
<button type="button" class="close restore-diloag" title="restore" style="display: none; vertical-align: middle" tabindex="-1"><i class='fa fa-clone' style="font-size: 16px; font-weight: bolder"></i> </button>
//ปุ่ม fullscreen
<button type="button" class="close fullscreen-dialog" title="maximize" style="vertical-align: middle" tabindex="-1"><i class='fa fa-window-maximize' style="font-size: 16px"></i> </button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
จะเห็นว่าปุ่มที่เพิ่มขึ้นมาจะมีการระบุชื่อ class “restore-dialog” และ “fullscreen-dialog” ซึ่งจะใช้ในการอ้างถึงในโค้ด jQuery ที่ใช้ควบคุมการทำงานเมื่อมีการคลิกปุ่มนั้นๆ
2. เนื่องจากผู้เขียนใช้ icon ที่อยู่ใน font awesome ดังนั้นจะต้องเพิ่ม link style sheet เพื่ออ้างไปถึงไฟล์ css ของ font awesome ภายนอกไซต์ที่กำลังพัฒนา (CDN) โดยไปเพิ่มไว้ใน tag <head></head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />3. เพิ่มชุดคำสั่ง jQuery
<script>
$(function () {
//เมื่อคลิกปุ่ม fullscreen
$(document).on('click', '.fullscreen-dialog', function (e) {
//เพิ่ม class fullscreen เพื่อให้แสดงผลแบบเต็มจอ
$('div.modal-dialog').addClass("fullscreen");
//แสดงปุ่ม restore
$('div.modal-dialog').find('.restore-diloag').show();
//ซ่อนปุ่ม fullscreen
$('div.modal-dialog').find('.fullscreen-dialog').hide();
});
//เมื่อคลิกปุ่ม restore
$(document).on('click', '.restore-diloag', function (e) {
//ลบ class fullscreen เพื่อให้กลับไปแสดงผลเหมือนเดิม
$('div.modal-dialog').removeClass("fullscreen");
//ซ่อนปุ่ม restore
$('div.modal-dialog').find('.restore-diloag').hide();
//แสดงปุ่ม fullscreen
$('div.modal-dialog').find('.fullscreen-dialog').show();
});
});
</script>4. ทดสอบ ก็จะได้ผลลัพธ์ดังภาพ
จะเห็นว่ามีปุ่ม fullscreen แสดงอยู่ เมื่อกด modal จะแสดงผลเป็น fullscreen ดังภาพ
และเมื่อกดปุ่ม restore หน้าจอ modal ก็จะแสดงผลกลับไปเป็นเหมือนเดิม
หวังว่าบทความนี้จะเป็นประโยชน์ไม่มากก็น้อย น่าจะพอเป็นแนวทางให้ผู้อ่านนำไปประยุกต์ใช้กับงานของตัวเองนะครับ
สวัสดีครับ
แหล่งข้อมูลอ้างอิง
เพื่อเลื่อนระดับความลึกมากน้อยได้ตามต้องการ ซึ่งจะเห็นได้ว่ามีการทำงานคล้ายกับการเยื้องย่อหน้าใน MS Word ที่เราคุ้นเคยกันดี 
