วิธีปรับขนาด Twitter Bootstrap modal แบบไดนามิกตามเนื้อหา

ฉันมีเนื้อหาฐานข้อมูลที่มีข้อมูลประเภทต่างๆเช่นวิดีโอ Youtube วิดีโอ Vimeo ข้อความรูปภาพ Imgur เป็นต้นทั้งหมดนี้มีความสูงและความกว้างที่แตกต่างกัน สิ่งที่ฉันพบขณะค้นหาอินเทอร์เน็ตกำลังเปลี่ยนขนาดเป็นพารามิเตอร์เดียว จะต้องเหมือนกับเนื้อหาในป๊อปอัป

นี่คือรหัส HTML ของฉัน ฉันยังใช้ Ajax เพื่อเรียกเนื้อหา

<div id="modal" 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="ModalLabel"></h3>
    </div>
    <div class="modal-body">

    </div>
</div> 

เนื่องจากเนื้อหาของคุณต้องเป็นแบบไดนามิกคุณจึงสามารถตั้งค่าคุณสมบัติ css ของโมดอลแบบไดนามิกในshowเหตุการณ์ของโมดอลซึ่งจะปรับขนาดโมดอลที่แทนที่ข้อกำหนดเริ่มต้น เหตุผลที่ bootstrap ใช้ความสูงสูงสุดกับเนื้อกิริยาด้วยกฎ css ดังต่อไปนี้:

.modal-body {
    position: relative;
    overflow-y: auto;
    max-height: 400px;
    padding: 15px;
}

ดังนั้นคุณสามารถเพิ่มสไตล์อินไลน์แบบไดนามิกโดยใช้cssวิธีjquery :

สำหรับการใช้ bootstrap เวอร์ชันใหม่กว่า show.bs.modal

$('#modal').on('show.bs.modal', function () {
       $(this).find('.modal-body').css({
              width:'auto', //probably not needed
              height:'auto', //probably not needed 
              'max-height':'100%'
       });
});

สำหรับ bootstrap เวอร์ชันเก่าให้ใช้ show

$('#modal').on('show', function () {
       $(this).find('.modal-body').css({
              width:'auto', //probably not needed
              height:'auto', //probably not needed 
              'max-height':'100%'
       });
});

หรือใช้กฎ css เพื่อแทนที่:

.autoModal.modal .modal-body{
    max-height: 100%;
}

และเพิ่มคลาสนี้autoModalลงในโมดอลเป้าหมายของคุณ

เปลี่ยนเนื้อหาแบบไดนามิกในซอคุณจะเห็นโมดอลได้รับการปรับขนาดตามนั้น Demo

event namesรุ่นใหม่ของบูตดูที่มีอยู่

• show.bs.modal เหตุการณ์นี้จะเริ่มทำงานทันทีเมื่อมีการเรียกใช้วิธีการแสดงอินสแตนซ์ หากเกิดจากการคลิกองค์ประกอบที่คลิกจะพร้อมใช้งานเป็นคุณสมบัติ relatedTarget ของเหตุการณ์
• shown.bs.modal เหตุการณ์นี้จะเริ่มทำงานเมื่อผู้ใช้มองเห็นโมดอลได้ (จะรอให้การเปลี่ยน CSS เสร็จสมบูรณ์) หากเกิดจากการคลิกองค์ประกอบที่คลิกจะพร้อมใช้งานเป็นคุณสมบัติ relatedTarget ของเหตุการณ์
• hide.bs.modal เหตุการณ์นี้จะเริ่มทำงานทันทีเมื่อมีการเรียกวิธีการซ่อนอินสแตนซ์
• hidden.bs.modal เหตุการณ์นี้จะเริ่มทำงานเมื่อโมดอลเสร็จสิ้นถูกซ่อนจากผู้ใช้ (จะรอให้การเปลี่ยน CSS เสร็จสมบูรณ์)
• loaded.bs.modal เหตุการณ์นี้จะเริ่มทำงานเมื่อโมดอลโหลดเนื้อหาโดยใช้ตัวเลือกระยะไกล

modal events รองรับbootstrap เวอร์ชันเก่ากว่า

• แสดง - เหตุการณ์นี้จะเริ่มทำงานทันทีเมื่อมีการเรียกใช้วิธีการแสดงอินสแตนซ์
• แสดง - เหตุการณ์นี้จะเริ่มทำงานเมื่อผู้ใช้สามารถมองเห็นโมดอลได้ (จะรอให้การเปลี่ยน css เสร็จสมบูรณ์)
• ซ่อน - เหตุการณ์นี้จะเริ่มทำงานทันทีเมื่อมีการเรียกวิธีการซ่อนอินสแตนซ์
• ซ่อนไว้ - เหตุการณ์นี้จะเริ่มทำงานเมื่อโมดอลถูกซ่อนจากผู้ใช้เสร็จสิ้น (จะรอให้การเปลี่ยน css เสร็จสมบูรณ์)

สิ่งนี้ใช้ได้ผลสำหรับฉันไม่มีข้อใดได้ผล

.modal-dialog{
    position: relative;
    display: table; /* This is important */ 
    overflow-y: auto;    
    overflow-x: auto;
    width: auto;
    min-width: 300px;   
}

ฉันจะไม่ได้รับการตอบ PSL ของการทำงานสำหรับฉันดังนั้นฉันได้พบสิ่งที่ฉันต้องทำคือการตั้ง div style="display: table;"ถือเนื้อหากิริยากับ เนื้อหาโมดอลเองบอกว่ามันต้องการจะใหญ่แค่ไหนและโมดอลก็รองรับได้

มีหลายวิธีในการดำเนินการนี้หากคุณต้องการเขียน css จากนั้นเพิ่มสิ่งต่อไปนี้

.modal-dialog{
  display: table
}

ในกรณีที่ต้องการเพิ่มอินไลน์

<div class="modal-dialog" style="display:table;">
//enter code here
</div>

อย่าเพิ่มลงdisplay:table;ในคลาสเนื้อหาโมดอล มันทำงานของคุณ แต่จัดการกิริยาของคุณสำหรับขนาดใหญ่ดูภาพหน้าจอต่อไปนี้ ภาพแรกคือถ้าคุณเพิ่มสไตล์ลงในกล่องโต้ตอบโมดอล หากคุณเพิ่มสไตล์ให้กับเนื้อหาโมดอล มันดูมีนิสัย

สำหรับ bootstrap 3 ใช้เช่น

$('#myModal').on('hidden.bs.modal', function () {
// do something…
})

Css อย่างง่ายทำงานให้ฉัน

.modal-dialog { 
max-width : 100% ;
}

ฉันเพียงแค่แทนที่ css:

.modal-dialog {
    max-width: 1000px;
}

ตั้งค่าwidth:fit-contentบน modal div

คุณสามารถทำได้ถ้าคุณใช้ปลั๊กอินโต้ตอบ jquery จาก gijgo.com และตั้งค่าความกว้างเป็นอัตโนมัติ

$("#dialog").dialog({
  uiLibrary: 'bootstrap',
  width: 'auto'
});

<html>
<head>
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <link href="http://code.gijgo.com/1.0.0/css/gijgo.css" rel="stylesheet" type="text/css">
  <script src="http://code.gijgo.com/1.0.0/js/gijgo.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <div id="dialog" title="Wikipedia">
   <img src="https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1122px-Wikipedia-logo-v2.svg.png" width="320"/>
 </div>
</body>
</html>

คุณยังสามารถอนุญาตให้ผู้ใช้ควบคุมขนาดได้หากคุณตั้งค่าปรับขนาดเป็นจริง คุณสามารถดูการสาธิตเกี่ยวกับเรื่องนี้ได้ที่http://gijgo.com/Dialog/Demos/bootstrap-modal-resizable

โซลูชัน CSS ง่ายๆที่จะจัดกึ่งกลางโมดอลในแนวตั้งและแนวนอน:

.modal.show {
  display: flex !important;
  justify-content: center;
}

.modal-dialog {
  align-self: center;
}

สำหรับ Bootstrap 2 ปรับความสูงของโมเดลอัตโนมัติแบบไดนามิก

  //Auto adjust modal height on open 
  $('#modal').on('shown',function(){
     var offset = 0;
     $(this).find('.modal-body').attr('style','max-height:'+($(window).height()-offset)+'px !important;');
  });

ฉันมีปัญหาเดียวกันกับ bootstrap 3 และความสูงของ modal-body div ที่ไม่ต้องการให้มากกว่า 442px นี่คือ css ทั้งหมดที่จำเป็นในการแก้ไขในกรณีของฉัน:

.modal-body {
    overflow-y: auto;
}

Mine Solution เป็นเพียงการเพิ่มสไตล์ด้านล่าง <div class="modal-body" style="clear: both;overflow: hidden;">

ตั้งแต่ Bootstrap 4 - มีรูปแบบของ:

@media (min-width: 576px)
.modal-dialog {
    max-width: 500px;
}

ดังนั้นหากคุณต้องการปรับขนาดความกว้างของโมดอลให้ใหญ่ขึ้นฉันขอแนะนำให้ใช้สิ่งนี้ใน css ของคุณเช่น:

.modal-dialog { max-width: 87vw; }

โปรดทราบว่าการตั้งค่าwidth: 87vw;จะไม่แทนที่ bootstrap'smax-width: 500px;จะไม่แทนที่ของบูต

การค้นหาของฉันทำให้ฉันมาที่นี่ดังนั้นอาจจะเพิ่มมูลค่าความคิดสองเซ็นต์ของฉันก็ได้ หากคุณใช้โมดอล Twitter Bootstrap ที่เป็นมิตรกับลิงคุณสามารถทำสิ่งนี้ได้:

    var dialog = new BootstrapDialog({
        id: 'myDialog',
        title: 'Title',
        closable: false,
        // whatever you like configuration here...
    });

    dialog.realize();
    if (isContentAYoutubeVideo()) {
        dialog.getModalDialog().css('width', '80%'); // set the width to whatever you like
    }
    dialog.open();

หวังว่านี่จะช่วยได้