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

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

Moderator: mindphp

jamepiyawat
PHP VIP Members
PHP VIP Members
Posts: 1291
Joined: 21/05/2019 10:45 am

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

Post by jamepiyawat » 26/07/2019 11:29 am

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

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

ปัญหาที่เป็นอยู่ รูปเล็ก กรอบ Modal ก็ใหญ่ไป
Selection_999(150).png
รูปใหญ่ กรอบ Modal ก็เล็กไป
Selection_999(151).png

User avatar
tsukasaz
PHP VIP Members
PHP VIP Members
Posts: 10452
Joined: 18/04/2012 9:39 am

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

Post by tsukasaz » 26/07/2019 2:03 pm

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

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

โค้ด HTML

Code: Select all

<!-- 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

Code: Select all

<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)

Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “HTML CSS”

Who is online

Users browsing this forum: No registered users and 33 guests