Bootstrap Modal Full Screen

by
Post Views: 5,301

หลายๆ ท่านที่เคยใช้งาน 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">&times;</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 และย่อให้กลับมาขนาดเท่าเดิม โดยสิ่งที่เราต้องทำเพิ่มคือ

  1. เพิ่มปุ่ม fullscreen
    • เมื่อ modal แสดงผลอยู่ในสภาพปกติ
    • เมื่อคลิกปุ่ม fullscreen จะเปลี่ยนการแสดงผล modal ให้เป็นแบบ fullscreen
    • ซ่อนปุ่ม fullscreen และแสดงผลปุ่ม restore แทน
  2. เพิ่มปุ่ม 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">&times;</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>&nbsp;</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>&nbsp;</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 ก็จะแสดงผลกลับไปเป็นเหมือนเดิม

หวังว่าบทความนี้จะเป็นประโยชน์ไม่มากก็น้อย น่าจะพอเป็นแนวทางให้ผู้อ่านนำไปประยุกต์ใช้กับงานของตัวเองนะครับ

สวัสดีครับ

แหล่งข้อมูลอ้างอิง