Tôi đã thử như sau:

   <div class="modal hide fade modal-admin" id="testModal" style="display: none;">
        <div class="modal-header">
          <a data-dismiss="modal" class="close">×</a>
          <h3 id='dialog-heading'></h3>
        </div>
        <div class="modal-body">
            <div id="dialog-data"></div>
        </div>
        <div class="modal-footer">
          <a data-dismiss="modal" class="btn" >Close</a>
          <a class="btn btn-primary" id="btnSaveChanges">Save changes</a>
        </div>
    </div>

Và Javascript này:

    $('.modal-admin').css('width', '750px');
    $('.modal-admin').css('margin', '100px auto 100px auto');
    $('.modal-admin').modal('show')

Kết quả không như tôi mong đợi. Phía trên cùng bên trái được đặt ở giữa màn hình.

Ai giúp tôi với. Đã có ai thử chưa. Tôi cho rằng đó không phải là một điều bất thường muốn làm.

CẬP NHẬT:

Trong bootstrap 3bạn cần thay đổi hộp thoại phương thức. Vì vậy, trong trường hợp này, bạn có thể thêm lớp modal-adminở vị trí modal-dialogđứng.

Câu trả lời gốc (Bootstrap <3)

Có một lý do nhất định nào đó mà bạn đang cố gắng thay đổi nó với JS / jQuery không?

Bạn có thể dễ dàng làm điều đó chỉ với CSS, điều đó có nghĩa là bạn không cần phải tạo kiểu trong tài liệu. Trong tệp CSS tùy chỉnh của riêng bạn, bạn thêm:

body .modal {
    /* new custom width */
    width: 560px;
    /* must be half of the width, minus scrollbar on the left (30px) */
    margin-left: -280px;
}

Trong trường hợp của bạn:

body .modal-admin {
    /* new custom width */
    width: 750px;
    /* must be half of the width, minus scrollbar on the left (30px) */
    margin-left: -375px;
}

Lý do tôi đặt cơ thể trước bộ chọn là để nó có mức độ ưu tiên cao hơn mặc định. Bằng cách này, bạn có thể thêm nó vào tệp CSS tùy chỉnh và không phải lo lắng cập nhật Bootstrap.

Nếu bạn muốn làm cho nó phản hồi chỉ bằng CSS, hãy sử dụng:

.modal.large {
    width: 80%; /* respsonsive width */
    margin-left:-40%; /* width/2) */ 
}

Lưu ý 1: Tôi đã sử dụng một .largelớp, bạn cũng có thể làm điều này trên bình thường.modal

Lưu ý 2: Trong Bootstrap 3, phần lề trái có thể không còn cần thiết nữa (không được xác nhận cá nhân)

/*Bootstrap 3*/
.modal.large {
     width: 80%;
}

Lưu ý 3: Trong Bootstrap 3 và 4, có một modal-lglớp. Vì vậy, điều này có thể là đủ, nhưng nếu bạn muốn làm cho nó phản hồi, bạn vẫn cần bản sửa lỗi tôi đã cung cấp cho Bootstrap 3.

Trong một số phương thức ứng dụng fixedđược sử dụng, trong trường hợp đó bạn có thể thử width:80%; left:10%;(công thức: left = 100 - width / 2)

Nếu bạn đang sử dụng Bootstrap 3, bạn cần thay đổi div hộp thoại modal chứ không phải div modal như nó được hiển thị trong câu trả lời được chấp nhận. Ngoài ra, để giữ bản chất phản hồi của Bootstrap 3, điều quan trọng là phải viết CSS ghi đè bằng truy vấn phương tiện để phương thức sẽ có chiều rộng đầy đủ trên các thiết bị nhỏ hơn.

Xem JSFiddle này để thử nghiệm với các độ rộng khác nhau.

HTML

<div class="modal fade">
    <div class="modal-dialog custom-class">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3 class="modal-header-text">Text</h3>
            </div>
            <div class="modal-body">
                This is some text.
            </div>
            <div class="modal-footer">
                This is some text.
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

CSS

@media screen and (min-width: 768px) {
    .custom-class {
        width: 70%; /* either % (e.g. 60%) or px (400px) */
    }
}

Nếu bạn muốn một cái gì đó không phá vỡ thiết kế tương đối, hãy thử điều này:

body .modal {
  width: 90%; /* desired relative width */
  left: 5%; /* (100%-width)/2 */
  /* place center */
  margin-left:auto;
  margin-right:auto; 
}

Như, @Marco Johannesen nói, "cơ thể" trước bộ chọn là để nó có mức độ ưu tiên cao hơn mặc định.

Trong Bootstrap 3+, cách thích hợp nhất để thay đổi kích thước của hộp thoại phương thức là sử dụng thuộc tính kích thước. Dưới đây là một ví dụ, chú ý modal-smdọc theo modal-dialoglớp, chỉ ra một phương thức nhỏ. Nó có thể chứa các giá trị smcho nhỏ, mdtrung bình và lglớn.

<div class="modal fade" id="ww_vergeten" tabindex="-1" role="dialog" aria-labelledby="modal_title" aria-hidden="true">
  <div class="modal-dialog modal-sm"> <!-- property to determine size -->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="modal_title">Some modal</h4>
      </div>
      <div class="modal-body">

        <!-- modal content -->

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="some_button" data-loading-text="Loading...">Send</button>
      </div>
    </div>
  </div>
</div>

Đối với Bootstrap 3đây là làm thế nào để làm điều đó.

Thêm một modal-widekiểu vào đánh dấu HTML của bạn (như được điều chỉnh từ ví dụ trong tài liệu Bootstrap 3 )

<div class="modal fade modal-wide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 id="myModalLabel" class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

và thêm CSS sau

.modal-wide .modal-dialog {
  width: 80%; /* or whatever you wish */
}

Không cần phải ghi đè lên margin-lefttrong Bootstrap 3để có được này để được làm trung tâm bây giờ.

Trong Bootstrap 3, tất cả những gì bạn cần là

<style>
    .modal .modal-dialog { width: 80%; }
</style>

Hầu hết các câu trả lời trên không có tác dụng với tôi !!!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<style>
  #myModal1 .modal-dialog {
    width: 80%;
  }
  #myModal2 .modal-dialog {
    width: 50%;
  }
</style>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">
  80%
</button>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">
  50%
</button>
<center>
  <!-- Modal -->
  <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
          custom width : 80%
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>


  <!-- Modal -->
  <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
          custom width : 50%
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

</center>

Giải pháp được đưa từ này trang

$('#feedback-modal').modal({
    backdrop: true,
    keyboard: true
}).css({
    width: 'auto',
    'margin-left': function () {
        return -($(this).width() / 2);
    }
});

Trong v3 của Bootstrap có một phương pháp đơn giản để làm cho một phương thức lớn hơn. Chỉ cần thêm lớp modal-lg bên cạnh hộp thoại modal.

<!-- My Modal Popup -->
<div id="MyWidePopup" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg"> <---------------------RIGHT HERE!!
        <!-- Modal content-->
        <div class="modal-content">

Bootstrap 3: Để duy trì các tính năng đáp ứng cho các thiết bị nhỏ và cực nhỏ, tôi đã làm như sau:

@media (min-width: 768px) {
.modal-dialog-wide
{ width: 750px;/* your width */ }
}

Đây là những gì tôi đã làm, trong custom.css của tôi, tôi đã thêm những dòng này và đó là tất cả.

.modal-lg {
    width: 600px!important;
    margin: 0 auto;
}

Rõ ràng, bạn có thể thay đổi kích thước của chiều rộng.

Nếu Bootstrap> 3, chỉ cần thêm kiểu vào phương thức của bạn.

<div class="modal-dialog" style="width:80%;">
  <div class="modal-content">
  </div>
</div>

Tôi đã tìm thấy giải pháp này phù hợp hơn với tôi. Bạn có thể sử dụng điều này:

$('.modal').css({
  'width': function () { 
    return ($(document).width() * .9) + 'px';  
  },
  'margin-left': function () { 
    return -($(this).width() / 2); 
  }
});

hoặc điều này tùy thuộc vào yêu cầu của bạn:

$('.modal').css({
  width: 'auto',
  'margin-left': function () {
     return -($(this).width() / 2);
  }
});

Xem bài đăng mà tôi tìm thấy: https://github.com/twitter/bootstrap/issues/675

FYI Bootstrap 3 tự động xử lý tài sản bên trái. Vì vậy, chỉ cần thêm CSS này sẽ thay đổi độ rộng và giữ nó ở giữa:

.modal .modal-dialog { width: 800px; }

Bảo toàn thiết kế đáp ứng, đặt chiều rộng cho những gì bạn mong muốn.

.modal-content {
  margin-left: auto;
  margin-right: auto;
  max-width: 360px;
}

Giữ cho nó đơn giản.

Thay đổi lớp model-dialogbạn có thể đạt được kết quả mong đợi. Những thủ thuật nhỏ này làm việc cho tôi. Hy vọng nó sẽ giúp bạn giải quyết vấn đề này.

.modal-dialog {
    width: 70%;
}

Với Bootstrap 3, tất cả những gì được yêu cầu là giá trị phần trăm được cung cấp cho hộp thoại phương thức thông qua CSS

CSS

#alertModal .modal-dialog{
     width: 20%;
}

Tôi đã sử dụng kết hợp CSS và jQuery, cùng với các gợi ý trên trang này, để tạo chiều rộng và chiều cao chất lỏng bằng Bootstrap 3.

Đầu tiên, một số CSS để xử lý chiều rộng và thanh cuộn tùy chọn cho khu vực nội dung

.modal.modal-wide .modal-dialog {
  width: 90%;
}
.modal-wide .modal-body {
  overflow-y: auto;
}

Và sau đó một số jQuery để điều chỉnh chiều cao của khu vực nội dung nếu cần

$(".modal-wide").on("show.bs.modal", function() {
  var height = $(window).height() - 200;
  $(this).find(".modal-body").css("max-height", height);
});

Viết và mã đầy đủ tại http://scottpdawson.com/development/creating-a-variable- thong-modal-dialog-USE-ototstrap-3 /

Trong Bootstrap 3 với CSS, bạn chỉ cần sử dụng:

body .modal-dialog {
    /* percentage of page width */
    width: 40%;
}

Điều này đảm bảo bạn không phá vỡ thiết kế của trang, bởi vì chúng tôi đang sử dụng .modal-dialogthay vì .modalsẽ được áp dụng ngay cả cho bóng.

Hãy thử một cái gì đó như sau (xem ví dụ jsfiddle trực tiếp tại đây: http://jsfiddle.net/periklis/hEThw/1/ )

<a class="btn" onclick = "$('#myModal').modal('show');$('#myModal').css('width', '100px').css('margin-left','auto').css('margin-right','auto');" ref="#myModal" >Launch Modal</a>
<div class="modal" id="myModal" style = "display:none">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>​

Thay vì sử dụng tỷ lệ phần trăm để làm cho phương thức phản hồi, tôi thấy có thể có nhiều kiểm soát hơn từ việc sử dụng các cột và các yếu tố đáp ứng khác đã được tích hợp vào bootstrap.

Để làm cho phương thức phản hồi / kích thước của bất kỳ số lượng cột nào:

1) Thêm một div phụ xung quanh div hộp thoại phương thức với một lớp .container -

<div class="container">
    <div class="modal-dialog">
    </div>
</div>

2) Thêm một chút CSS để tạo độ rộng đầy đủ cho phương thức -

.modal-dialog {
    width: 100% }

3) Hoặc thêm vào một lớp học thêm nếu bạn có các phương thức khác -

<div class="container">
    <div class="modal-dialog modal-responsive">
    </div>
</div>

.modal-responsive.modal-dialog {
    width: 100% }

4) Thêm vào một hàng / cột nếu bạn muốn các chế độ có kích thước khác nhau -

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="modal-dialog modal-responsive">
       ...
      </div>
    </div>
  </div>
</div>

Thêm vào sau vào tập tin css của bạn

.popover{
         width:auto !important; 
         max-width:445px !important; 
         min-width:200px !important;
       }

Sử dụng tập lệnh bên dưới:

.modal {
  --widthOfModal: 98%;
  width: var(--widthOfModal) !important;
  margin-left: calc(calc(var(--widthOfModal) / 2) * (-1)) !important;
  height: 92%;

  overflow-y: scroll;
}

Bản trình diễn :

Tôi đã giải quyết nó cho Bootstrap 4.1

Kết hợp các giải pháp được đăng trước đó

.modal-lg {
  max-width: 90% !important; /* desired relative width */
  margin-left:auto !important;
  margin-right:auto !important;
}

Đạt được kết quả mong đợi bằng cách sử dụng,

.modal-dialog {
    width: 41% !important;
}

Bootstrap 3.xx

   <!-- Modal -->
<div class="modal fade" id="employeeBasicDetails" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-sm employeeModal" role="document">

        <form>

        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal Title</h4>
            </div>

            <div class="modal-body row">
                Modal Body...
            </div>

            <div class="modal-footer"> 
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

        </form>

    </div>
</div>

Lưu ý rằng tôi đã thêm lớp .employeeModal trong div thứ hai. Rồi phong cách mà đẳng cấp.

.employeeModal{
        width: 700px;
    }

Tôi đã sử dụng theo cách này và nó hoạt động hoàn hảo đối với tôi

$("#my-modal")
.modal("toggle")
.css({'width': '80%', 'margin-left':'auto', 'margin-right':'auto', 'left':'10%'});

Giải pháp ít dựa trên (không có js) cho Bootstrap 2:

.modal-width(@modalWidth) {
    width: @modalWidth;
    margin-left: -@modalWidth/2;

    @media (max-width: @modalWidth) {
        position: fixed;
        top:   20px;
        left:  20px;
        right: 20px;
        width: auto;
        margin: 0;
        &.fade  { top: -100px; }
        &.fade.in { top: 20px; }
    }
}

Sau đó, bất cứ nơi nào bạn muốn chỉ định một chiều rộng phương thức:

#myModal {
    .modal-width(700px);
}

Tôi đã sử dụng SCSS và phương thức đáp ứng đầy đủ:

.modal-dialog.large {
    @media (min-width: $screen-sm-min) { width:500px; }
    @media (min-width: $screen-md-min) { width:700px; }
    @media (min-width: $screen-lg-min) { width:850px; }
} 

you can use any prefix or postfix name for modal. but you need to make sure that's should use everywhere with same prefix/postfix name.    

body .modal-nk {
        /* new custom width */
        width: 560px;
        /* must be half of the width, minus scrollbar on the left (30px) */
        margin-left: -280px;
    }

hoặc là

body .nk-modal {
            /* new custom width */
            width: 560px;
            /* must be half of the width, minus scrollbar on the left (30px) */
            margin-left: -280px;
        }