พอดีว่าผมได้ทำ Modal Bootstrap มาเพื่อจะใส่รูปภาพทีนี้รูปภาพก็จะมีขนาดที่แตกต่างกันไปอะครับทำให้กรอบของModal ขยายได้ไม่เท่ากับรูปภาพ
จึงอยากทราบวิธีที่จะปรับ Modal ให้กรอบเท่ากับรูปครับ
ปัญหาที่เป็นอยู่ รูปเล็ก กรอบ Modal ก็ใหญ่ไป
รูปใหญ่ กรอบ Modal ก็เล็กไป
อยากทราบวิธีปรับ Modal Bootstrap ให้กรอบ Modal เท่ากับรูปที่ใส่ลงไป ครับ
Moderator: mindphp
- jamepiyawat
- PHP VIP Members
- โพสต์: 2008
- ลงทะเบียนเมื่อ: 21/05/2019 10:45 am
- tsukasaz
- PHP VIP Members
- โพสต์: 21991
- ลงทะเบียนเมื่อ: 18/04/2012 9:39 am
Re: อยากทราบวิธีปรับ Modal Bootstrap ให้กรอบ Modal เท่ากับรูปที่ใส่ลงไป ครับ
ถ้าขนาดรูปแบบแน่นอน ก็เขียน css กำหนดความกว้างให้กับ modal เลยก็ได้ครับ width: 500px; แบบนี้
แต่ถ้ารูปภาพขนาดไม่นอนอาจจะต้องใช้ javascript เช็คขนาดภาพก่อน
โค้ด HTML
โค้ด Javascript
แต่ถ้ารูปภาพขนาดไม่นอนอาจจะต้องใช้ 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>
โค้ด: เลือกทั้งหมด
<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
- ตอบกลับ
- แสดง
- โพสต์ล่าสุด
-
- 0 ตอบกลับ
- 1834 แสดง
-
โพสต์ล่าสุด โดย MBMoo
21/06/2021 10:46 am
-
-
โพสต์ใหม่ อยากทราบวิธีการปรับขนาด modal bootstrap ครับ
โดย jamepiyawat » 25/07/2019 12:02 pm » ใน HTML CSS - 1 ตอบกลับ
- 4833 แสดง
-
โพสต์ล่าสุด โดย tsukasaz
25/07/2019 2:54 pm
-
-
-
โพสต์ใหม่ ทำป้าย PopUp ด้วย Modal ใน Bootstrap เวอร์ชั่น 4
โดย jamepiyawat » 10/10/2019 5:20 pm » ใน Booststap Knowledge - 0 ตอบกลับ
- 5920 แสดง
-
โพสต์ล่าสุด โดย jamepiyawat
10/10/2019 5:20 pm
-
-
-
โพสต์ใหม่ สอบถามใน modal header ภาษาไม่ขึ้น
โดย Thanapoom1514 » 23/03/2023 1:09 pm » ใน Joomla Development - 2 ตอบกลับ
- 2522 แสดง
-
โพสต์ล่าสุด โดย Thanapoom1514
23/03/2023 1:22 pm
-
-
-
โพสต์ใหม่ อยากที่วิธีที่ทำให้ modal แสดงรูปภาพเพี่ยงแค่เราใส่ URL ที่ฝากรูปภาพ
โดย jamepiyawat » 31/07/2019 2:43 pm » ใน HTML CSS - 4 ตอบกลับ
- 1036 แสดง
-
โพสต์ล่าสุด โดย jamepiyawat
31/07/2019 3:43 pm
-
-
-
โพสต์ใหม่ ทำความรู้จัก Modal Verb ในภาษาอังกฤษ
โดย bonwaranyu » 17/11/2022 4:37 pm » ใน Microsoft Office Knowledge & line & Etc - 0 ตอบกลับ
- 872 แสดง
-
โพสต์ล่าสุด โดย bonwaranyu
17/11/2022 4:37 pm
-
-
-
โพสต์ใหม่ สอบถามปุ่มเลือกเอกสารกดแล้วมันไม่ขึ้น modal ในหน้าเพิ่มเมนู joomla 5 ครับ
โดย Thanapoom1514 » 14/12/2023 11:45 am » ใน Joomla Development - 2 ตอบกลับ
- 1944 แสดง
-
โพสต์ล่าสุด โดย Thanapoom1514
19/12/2023 7:53 pm
-
-
-
โพสต์ใหม่ การค้นหาข้อมูล MySQL โดยใช้เทคนิค Modal JQuery Ajax
โดย abdkode » 05/04/2019 3:44 pm » ใน jQuery & Ajax Knowledge - 0 ตอบกลับ
- 5036 แสดง
-
โพสต์ล่าสุด โดย abdkode
05/04/2019 3:44 pm
-
ผู้ใช้งานขณะนี้
สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 68