如何調整不同大小的兩種不同模態

Question

我有兩個Bootstrap模態。一個應該很小，一個應該很大。 當我這樣做

.modal-content { 
 
    background-clip: padding-box; 
 
    background-color: #fff; 
 
    border: 1px solid rgba(0, 0, 0, 0.2); 
 
    border-radius: 6px; 
 
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); 
 
    height: 600px; 
 
    outline: 0 none; 
 
    position: relative; 
 
    width: 1000px; 
 
    margin-left: -272px; 
 
    margin-top: 115px; 
 
    overflow:scroll; 
 
}

兩種模式600x1000的大小。因爲兩種模式都使用相同的類.modal-content。

This 1st modal。the size of this modal should be 200x200

function cancel() { 
 
    var $textAndPic = $('<div style=" font-weight: bold; ">Do You Want to Cancel me ?</div>'); 
 
    BootstrapDialog.show({ 
 
    title: 'Confirmation', 
 
    message: $textAndPic, 
 
    buttons: [ 
 
     { 
 
     label: 'Confirm', 
 
     action: function (dialogRef) { 
 
      $.ajax({ 
 
      type: "POST", 
 
      url: 'url 
 
      data: '', 
 
      dataType: "json", 
 
      contentType: "application/json", 
 
      crossDomain: true, 
 
      success: function (data) { 
 
       alert('Cancelled Successfully'); 
 
      }, 
 
      error: function (data) { 
 
       alert(' Cancelled Successfully'); 
 
      } 
 
      }); 
 
      dialogRef.close(); 
 
     } 
 
     }, 
 
     { 
 
     label: 'Deny', 
 
     action: function (dialogRef) { 
 
      dialogRef.close(); 
 
     } 
 
     } 
 
    ] 
 
    }); 
 
}

這是我的第二模式這種模式的大小應該是600x1000

<div class="modal fade" id="modalTable" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <table id="table"> 
 
      <thead> 
 
      <tr> 
 
      <th class="col-xs-1" data-field="jobId">Filed 1</th> 
 
      <th class="col-xs-1" data-field="Number"> Filed 2</th> 
 
      <th class="col-xs-2" data-field="organizationName">Filed 3</th> 
 
      <th class="col-xs-1" data-field="countryCode">Filed 4</th> 
 
      <th class="col-xs-6" data-field="errorMessage"> Filed 5</th> 
 
      </tr> 
 
      </thead> 
 
     </table> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

已經有那完美的類。看看here。所以只需使用modal-lg和modal-sm作爲不同尺寸的類。這裏的默認班級是modal-md。

如果尺寸不適合你，你可以去here，只需下載一個自定義版本的bootstrap，只需進入模態，你可以自己選擇需要的尺寸。