iT邦幫忙

0

40.Bootstrap(中文教程)元件:Modal:對話框的選項

ㄧ.Modal:對話框的選項

<div class="component" id="demo">
  <div class="modal fade show" id="modal-demo" data-backdrop="false">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal</h5>
          <button class="close" data-dismiss="modal">×</button>
        </div>
        <div class="modal-body">
          <p>hello~</p>
        </div>
        <div class="modal-footer">
          <button class="btn btn-primary">確認</button>
          <button class="btn btn-secondary">取消</button>
        </div>
      </div>
    </div>
  </div>
  <button class="btn btn-danger" data-toggle="modal" data-target="#modal-demo">刪除</button>
</div>



.demo.component{
  padding: 50px;
}

重點:

  1. data-backdrop="false"為取消半透明暗色背景
  2. 2.在console使用$('#modal-demo').modal('show');$('#modal-demo').modal('hide');
  3. 也可用$('#modal-demo').modal('hide');

codepen
參考:bootstrap4


尚未有邦友留言

立即登入留言