Bootstrap 4创建非模式对话框

时间:2018-08-09 08:55:05

标签: css bootstrap-4

我想使用引导程序4创建一个非模式对话框。

<div class="container">
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
  </button>
  <div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          Modal body..
        </div>
      </div>
    </div>
  </div>
</div>

我尝试通过覆盖如下的 model

.modal{
  top:10%;
  left:50%;
  bottom:auto;
  right:auto;
  margin-left: 30%;
}

有人可以帮我吗

1 个答案:

答案 0 :(得分:2)

向您的模态中添加一个名为modalless的类。像这样-

<div class="modal fade modalless" id="myModal">

然后在CSS中,执行以下操作。现在应该可以了。

.modalless{
    top:10%;
    left:50%;
    bottom:auto;
    right:auto;
    margin-left:-300px;
}

请查看此link以获取示例。