Bootstarp 4 入门之模模态框 modal

模态框 modal

使用Bootstrap的JavaScript模式插件将对话框添加到您的网站,以获取灯箱,用户通知或完全自定义的内容
基本用法

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

样式解析

.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0;
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: .5rem;
    pointer-events: none;
}

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

.modal-content {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3rem;
    outline: 0;
}

.modal-header {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 1rem 1rem;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: calc(.3rem - 1px);
    border-top-right-radius: calc(.3rem - 1px);
}

.modal-body {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1rem;
}

.modal-footer {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding: .75rem;
    border-top: 1px solid #dee2e6;
    border-bottom-right-radius: calc(.3rem - 1px);
    border-bottom-left-radius: calc(.3rem - 1px);
}

打开的时候,会在body 增加classmodal-open

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}

.modal.fade .modal-dialog {
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out,-webkit-transform .3s ease-out;
    -webkit-transform: translate(0,-50px);
    transform: translate(0,-50px);
}

.modal.show .modal-dialog {
    -webkit-transform: none;
    transform: none;
}

带阴影

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: #000;
}
.fade {
    transition: opacity .15s linear;
}
.modal-backdrop.show {
    opacity: .5;
}
.modal-backdrop.fade {
    opacity: 0;
}

增加滚动条内容

允许通过添加滚动模式的.modal-dialog-scrollable.modal-dialog
描述

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

垂直居中

将模态添加.modal-dialog-centered.modal-dialog垂直居中

动态高度

如果模态的高度在打开时发生变化,则应调用$('#myModal').modal('handleUpdate')来重新调整模态的位置,以防滚动条出现

尺寸大小

尺寸 模态最大宽度
.modal-sm 300px
默认 没有 500px
.modal-lg 800px
超大 .modal-xl 1140px

data 用法

data-toggle="modal"的控制器元件上,像一个按钮,以及一个data-target="#foo"href="#foo",指定特定模态切换

JS 用法

$('#myModal').modal(options)

参数options

Name Type Default Description
backdrop 设置`true`或 'static' true 背景阴影
keyboard boolean true 按下退出键时关闭模式
focus boolean true 初始化时将重点放在模态上
show boolean true 初始化时显示模态.

回调

Event Type Description
show.bs.modal show调用的时候,则触发
shown.bs.modal 当使模式对用户可见时将触发此事件,则触发
hide.bs.modal hide调用实例方法后,立即触发此事件
hidden.bs.modal 当模态完成向用户隐藏时将触发此事件.
hidePrevented.bs.modal 当显示模态时显示此事件,其背景为,static并在模态外单击或执行Escape键
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。