อยากทราบวิธีปรับ Modal Bootstrap ให้กรอบ Modal เท่ากับรูปที่ใส่ลงไป ครับ

HTML Basic
สำหรับนักพัฒนาเว็บไซต์มือใหม่ HTML , CSS และการใช้ Tools ต่างๆ ในการพัฒนาเว็บไซต์

Moderator: mindphp

ภาพประจำตัวสมาชิก
jamepiyawat
PHP VIP Members
PHP VIP Members
โพสต์: 2008
ลงทะเบียนเมื่อ: 21/05/2019 10:45 am

อยากทราบวิธีปรับ Modal Bootstrap ให้กรอบ Modal เท่ากับรูปที่ใส่ลงไป ครับ

โพสต์ที่ยังไม่ได้อ่าน โดย jamepiyawat »

พอดีว่าผมได้ทำ Modal Bootstrap มาเพื่อจะใส่รูปภาพทีนี้รูปภาพก็จะมีขนาดที่แตกต่างกันไปอะครับทำให้กรอบของModal ขยายได้ไม่เท่ากับรูปภาพ

จึงอยากทราบวิธีที่จะปรับ Modal ให้กรอบเท่ากับรูปครับ

ปัญหาที่เป็นอยู่ รูปเล็ก กรอบ Modal ก็ใหญ่ไป
Selection_999(150).png
รูปใหญ่ กรอบ Modal ก็เล็กไป
Selection_999(151).png
ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 21991
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

Re: อยากทราบวิธีปรับ Modal Bootstrap ให้กรอบ Modal เท่ากับรูปที่ใส่ลงไป ครับ

โพสต์ที่ยังไม่ได้อ่าน โดย tsukasaz »

ถ้าขนาดรูปแบบแน่นอน ก็เขียน css กำหนดความกว้างให้กับ modal เลยก็ได้ครับ width: 500px; แบบนี้

แต่ถ้ารูปภาพขนาดไม่นอนอาจจะต้องใช้ javascript เช็คขนาดภาพก่อน

โค้ด HTML

โค้ด: เลือกทั้งหมด

<!-- Modal -->
<div id="myModalBox">
	<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel">Modal header</h3>
		</div>
		<div class="modal-body text-center">
			<p><img src="http://via.placeholder.com/300" /></p>
		</div>
		<div class="modal-footer">
			<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
			<button class="btn btn-primary">Save changes</button>
		</div>
	</div>
</div>
โค้ด Javascript

โค้ด: เลือกทั้งหมด

<script>
	jQuery(function ($) {
		$('#myModalBox').css('visibility', 'hidden');
		$('#myModal').modal('show');
		$('#myModal').on('shown', function () {
			var img_width = $('#myModal img').width();
			$('#myModalBox').css('visibility', 'visible');
			$('#myModal').css('width', img_width);
			$('#myModal').css('margin-left', '-' + (img_width / 2) + 'px');
		});
	});
</script>
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 68