Note_Tech

All technological notes.

Project maintained by simonangel-fong Hosted on GitHub Pages — Theme by mattgraham

Bootstrap - Modal

基本组件和触发: HTML 代码

使用基本 html 代码即可触发 modal

<!-- Button trigger modal -->
<button
  type="button"
  class="btn btn-primary"
  data-bs-toggle="modal"
  data-bs-target="#exampleModal"
>
  Launch demo modal
</button>

<!-- Modal -->
<div id="exampleModal" class="modal" tabindex="-1">
  <div class="modal-dialog">
    <!-- content 用于摆放内容 -->
    <div class="modal-content">
      <!-- header 通常用于显示标题 -->
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>

      <!-- body 用于显示主要内容 -->
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>

      <!-- footer 用于显示按钮 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          Close
        </button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

代码说明：

效果：按钮触发 modal

按钮属性

data-bs-toggle="modal": 设定切换的类型是 modal。设定后，bootstrap 会触发 modal 的 toggle 方法

data-bs-target="#exampleModal": 设定切换的对象。

Modal

class="modal":引用 bootstrap 的 modal 的 css;

tabindex: 设置 tab 的自序，对显示无影响；

data-bs-dismiss="modal": 设定取消的类型是 modal。通常用于 modal 中的’取消’按钮，用于隐藏 modal

modal 组件常用属性： | 属性 | 默认值 | 效果 | 说明 | | —- | —- | —- | —- | | data-bs-backdrop | true | 设置背景 | true: 显示半透明的背景; false: 不显示背景; static: 背景是静止,点击背景不会关闭. |

回到目录

触发事件

触发事件 - Javascript

代码	事件	说明
`.toggle()`	切换
`.show()`	显示
`.hide()`	隐藏

html 代码

<!-- Button trigger modal -->
<button
  id="btn"
  type="button"
  class="btn btn-primary"
  data-bs-toggle="modal"
  data-bs-target="#exampleModal"
>
  Launch demo modal
</button>

<!-- Modal -->
<div id="exampleModal" class="modal" tabindex="-1">
  <div class="modal-dialog">
    <!-- content 用于摆放内容 -->
    <div class="modal-content">
      <!-- header 通常用于显示标题 -->
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>

      <!-- body 用于显示主要内容 -->
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>

      <!-- footer 用于显示按钮 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          Close
        </button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Javascript 代码(非 jQuery)

//JavaScript代码(非jQuery)：
var button = document.getElementById("btn");
var modal = new bootstrap.Modal(document.getElementById("modal"), {});

button.addEventListener("click", function () {
  modal.toggle(); //切换modal
});

代码说明：

以上代码是纯 js 代码，不引用 jQuery 库;

new bootstrap.Modal()是创建新的 modal 实例。

包含两个参数：

HTML DOM, 引用的 html 对象;

字典类型, 新建对象的参数,如{keyboard: false}.

.addEventListener("click",function(){}:添加事件到按钮;

modal.toggle(): 触发 modal 切换事件.

注意:

js 下必须使用new bootstrap.Modal()创建 modal 实例, 不能直接引用：
var modal = document.getElementById("modal");
modal.toggle(); //或报错：Uncaught TypeError: modal.toggle is not a function
.toggle()是 js 代码有效. 如果是 jquery,该方法无效,需要使用modal("toggle")

回到目录

触发事件 - jQuery

代码	事件	说明
`.modal("toggle")`	切换
`.modal("show")`	显示
`.modal("hide")`	隐藏

Javascript 代码(jQuery)

//JavaScript代码(jQuery)：
$("#btn").click(function () {
  $("#modal").modal("toggle");
});

代码说明：

以上引用 jQuery 库;

.modal('toggle')触发 toggle 事件.可以直接使用 jquery 捕获现有的 html DOM 对象

回到目录

定义事件

定义事件 - JavaScript

代码	事件	说明
`"show.bs.modal"`	显示
`"hide.bs.modal"`	隐藏

html 代码:

<!-- Button trigger modal -->
<button
  id="btn"
  type="button"
  class="btn btn-primary"
  data-bs-toggle="modal"
  data-bs-target="#modal"
  data-bs-whatever="@mdo"
>
  Launch demo modal
</button>

<!-- Modal -->
<div id="modal" class="modal" tabindex="-1">
  <div class="modal-dialog">
    <!-- content 用于摆放内容 -->
    <div class="modal-content">
      <!-- header 通常用于显示标题 -->
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>

      <!-- body 用于显示主要内容 -->
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>

      <!-- footer 用于显示按钮 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          Close
        </button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

JavaScript

var button = document.getElementById("btn");
var modal = document.getElementById("modal");

var myModal = new bootstrap.Modal(modal, {});

button.addEventListener("click", function () {
  myModal.toggle(); //切换modal
});

// 绑定事件到modal
modal.addEventListener("show.bs.modal", function (event) {
  var btn = event.relatedTarget;

  // Extract info from data-bs-* attributes
  var data = btn.getAttribute("data-bs-whatever");
  alert(data);
});

代码说明:

html 代码中的data-bs-**属性用于存放待传输的数据;

.addEventListener('show.bs.modal', function(event){}): 设定 model 显示时执行的代码;

event.relatedTarget: 用来进行引用触发的对象。注意:该方法仅适用于使用 htmldata-bs-toggle="modal"属性触发的切换; 如果是使用 js.toggle()触发的，将返回undefined;

.getAttribute(): 用来获取目标元素的属性值.

回到目录

定义事件 - jQuery

html 代码同上
js 代码(jQuery)

$("#btn").click(function () {
  $("#modal").modal("toggle");
});

$("#modal").on("show.bs.modal", function (event) {
  var data = $("#btn").attr("data-bs-whatever");
  alert(data);
});

代码说明：

.on("show.bs.modal", function (event) {}: 使用on方法定义事件

.attr(""): 直接使用attr方法获取属性的值；注意：也可以使用event.relatedTarget,但不能使用 jQuery 语法。

TOP

Note_Tech

Bootstrap - Modal

基本组件和触发: HTML 代码

触发事件

触发事件 - Javascript

触发事件 - jQuery

定义事件

定义事件 - JavaScript

定义事件 - jQuery