Cách thay đổi kích thước phương thức Twitter Bootstrap động dựa trên nội dung

Tôi có nội dung cơ sở dữ liệu có nhiều loại dữ liệu khác nhau, chẳng hạn như video Youtube, video Vimeo, văn bản, ảnh Imgur, v.v. Tất cả chúng đều có chiều cao và chiều rộng khác nhau. Tất cả những gì tôi tìm thấy trong khi tìm kiếm trên Internet là thay đổi kích thước thành chỉ một tham số. Nó phải giống với nội dung trong cửa sổ bật lên.

Đây là mã HTML của tôi. Tôi cũng sử dụng Ajax để gọi nội dung.

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

Vì nội dung của bạn phải động nên bạn có thể đặt động các thuộc tính css của phương thức showkhi phương thức đó sẽ thay đổi kích thước của phương thức ghi đè thông số kỹ thuật mặc định của nó. Lý do là bootstrap áp dụng chiều cao tối đa cho nội dung phương thức với quy tắc css như sau:

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

Vì vậy, bạn có thể thêm các kiểu nội tuyến động bằng cách sử dụng jquery css phương thức :

Đối với các phiên bản mới hơn của việc sử dụng 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%'
       });
});

Đối với các phiên bản cũ hơn của việc sử dụng bootstrap show

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

hoặc sử dụng quy tắc css để ghi đè:

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

và thêm lớp này autoModal vào các phương thức mục tiêu của bạn.

Thay đổi nội dung động trong fiddle, bạn sẽ thấy phương thức được thay đổi kích thước cho phù hợp. Demo

Phiên bản bootstrap mới hơn xem có sẵn event names.

• show.bs.modal Sự kiện này kích hoạt ngay lập tức khi phương thức thể hiện show được gọi. Nếu do một nhấp chuột gây ra, phần tử được nhấp sẽ có sẵn dưới dạng thuộc tính Mục tiêu liên quan của sự kiện.
• show.bs.modal Sự kiện này được kích hoạt khi phương thức đã được hiển thị cho người dùng (sẽ đợi quá trình chuyển đổi CSS hoàn tất). Nếu do một nhấp chuột gây ra, phần tử được nhấp sẽ có sẵn dưới dạng thuộc tính Mục tiêu liên quan của sự kiện.
• hide.bs.modal Sự kiện này được kích hoạt ngay lập tức khi phương thức ẩn thể hiện được gọi.
• hidden.bs.modal Sự kiện này được kích hoạt khi phương thức hoàn tất bị ẩn khỏi người dùng (sẽ đợi quá trình chuyển đổi CSS hoàn tất).
• load.bs.modal Sự kiện này được kích hoạt khi phương thức đã tải nội dung bằng tùy chọn từ xa.

Hỗ modal events trợ phiên bản bootstrap cũ hơn .

• Show - Sự kiện này kích hoạt ngay lập tức khi phương thức show instance được gọi.
• hiển thị - Sự kiện này được kích hoạt khi phương thức được hiển thị cho người dùng (sẽ đợi quá trình chuyển đổi css hoàn tất).
• hide - Sự kiện này được kích hoạt ngay lập tức khi phương thức hide instance đã được gọi.
• hidden - Sự kiện này được kích hoạt khi phương thức hoàn tất bị ẩn khỏi người dùng (sẽ đợi quá trình chuyển đổi css hoàn tất).

Điều này làm việc cho tôi, không có điều nào ở trên hoạt động.

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

Tôi không thể nhận được câu trả lời của PSL phù hợp với tôi vì vậy tôi thấy tất cả những gì tôi phải làm là đặt div giữ nội dung phương thức style="display: table;". Bản thân nội dung phương thức nói lên nó muốn lớn đến mức nào và phương thức có thể đáp ứng được nó.

Có nhiều cách để làm điều này nếu bạn muốn viết css thì hãy thêm sau

.modal-dialog{
  display: table
}

Trong trường hợp nếu bạn muốn thêm nội tuyến

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

Không thêm display:table;vào lớp nội dung phương thức. nó đã hoàn thành công việc của bạn nhưng bố trí phương thức của bạn cho kích thước lớn, hãy xem ảnh chụp màn hình sau. hình ảnh đầu tiên là nếu bạn thêm kiểu vào hộp thoại phương thức nếu bạn thêm kiểu vào nội dung phương thức. nó trông có vẻ lệch lạc.

cho bootstrap 3 sử dụng như

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

Công việc Css đơn giản cho tôi

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

Tôi chỉ cần ghi đè css:

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

đặt width:fit-contenttrên div phương thức.

Bạn có thể làm điều đó nếu bạn sử dụng plugin hộp thoại jquery từ gijgo.com và đặt chiều rộng thành tự động.

$("#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>

Bạn cũng có thể cho phép người dùng kiểm soát kích thước nếu bạn đặt có thể thay đổi kích thước thành true. Bạn có thể xem bản demo về điều này tại http://gijgo.com/Dialog/Demos/bootstrap-modal-resizable

Một giải pháp CSS đơn giản sẽ căn giữa phương thức theo chiều dọc và chiều ngang:

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

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

Đối với Bootstrap 2 Tự động điều chỉnh chiều cao mô hình một cách tự động

  //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;');
  });

Tôi đã gặp vấn đề tương tự với bootstrap 3 và chiều cao của modal-body div không muốn lớn hơn 442px. Đây là tất cả css cần thiết để sửa chữa nó trong trường hợp của tôi:

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

Giải pháp của tôi chỉ là để thêm phong cách bên dưới. <div class="modal-body" style="clear: both;overflow: hidden;">

Kể từ Bootstrap 4 - nó có phong cách:

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

vì vậy nếu bạn đang tìm cách thay đổi kích thước chiều rộng phương thức thành chiều rộng lớn hơn, tôi khuyên bạn nên sử dụng điều này trong css của bạn, ví dụ:

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

Lưu ý rằng cài đặt width: 87vw;sẽ không ghi đè bootstrap max-width: 500px;.

Tìm kiếm của tôi đã dẫn tôi đến đây vì vậy cũng có thể thêm hai xu giá trị ý tưởng của tôi. Nếu bạn đang sử dụng phương thức Twitter Bootstrap thân thiện với khỉ thì bạn có thể làm như sau:

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

Hi vọng điêu nay co ich.