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。

第一种模式。 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，只需转到模态，你可以自己选择所需尺寸。

如何调整不同大小的两个不同模态

1 个答案: