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

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

Moderator: mindphp

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

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

โพสต์โดย jamepiyawat » 26/07/2019 11:29 am

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

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

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

รูปใหญ่ กรอบ Modal ก็เล็กไป
Selection_999(151).png

ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 9961
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

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

โพสต์โดย tsukasaz » 26/07/2019 2:03 pm

ถ้าขนาดรูปแบบแน่นอน ก็เขียน 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
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

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

กำลังดูบอร์ดนี้: 10 และ บุคคลทั่วไป 0 ท่าน