Ajax-bootstrap弹框

Ajax
453 词
bootstrap弹框

bootstrap弹框#

功能：不离开当前页面，显示单独内容，供用户操作

步骤：

  1. 引入bootstrap的css和js
  2. 准备弹框标签，确认结构
  3. 通过自定义属性，控制弹框的显示和隐藏

bootstrap的modal弹框：添加modal类名（默认隐藏）

通过js控制，弹框显示或隐藏

// 创建弹框对象
const modalDom = document.querySelector('.my-box')
const modal = new bootstrap.Modal(modalDom);
document.querySelector('.edit-btn').addEventListener('click', function() {
    // 显示弹框
    modal.show()
});
document.querySelector('.save-btn').addEventListener('click', function() {
    // 隐藏弹框
    modal.hide()
})
Modal title#