制作模态框

逐梦之影
273 阅读1分钟

制作模态框

注意：模态框是基于boostrap和jQuery，所以必须引入这两个js文件
其版本兼容问题如下：
1.boostrap V3,配合jQuery 2.以下
2.boostrap V4,配合jQuery 2.以上

找到模态框

文档 》 组件 》 模态框

选择需要的模态框静态页面代码

添加到页面

尽量做为body的直接子元素，否则会被其它的元素影响

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">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>

编辑模态框

<!-- 编辑模态框 -->
<div
     class="modal fade"
     id="editModal"
     tabindex="-1"
     aria-labelledby="exampleModalLabel"
     aria-hidden="true"
     >
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">图书编辑</h5>
                <button
                        type="button"
                        class="close"
                        data-dismiss="modal"
                        aria-label="Close"
                        >
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="card-body bg-light" id="editForm">
                    <!-- 书名 -->
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">书名</span>
                        </div>
                        <input
                               type="text"
                               class="form-control bookname"
                               placeholder="请输入图书名称"
                               name="editbookname"
                               />
                    </div>
                    <!-- 作者 -->
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">作者</span>
                        </div>
                        <input
                               type="text"
                               class="form-control"
                               placeholder="请输入作者名字"
                               name="editauthor"
                               />
                    </div>
                    <!-- 出版社 -->
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">出版社</span>
                        </div>
                        <input
                               type="text"
                               class="form-control"
                               placeholder="请输入出版社名称"
                               name="editpublisher"
                               />
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button
                        type="button"
                        class="btn btn-secondary"
                        data-dismiss="modal"
                        >
                    取消
                </button>
                <button type="button" class="btn btn-primary">确定</button>
            </div>
        </div>
    </div>
</div>

弹出模态框并填充默认数据

弹出方式

属性方式:单击按钮，会自动的弹出指定的模态框

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
  • data-toggle：说明它是有效果是进行切换
  • data-target：说明效果对应的是哪一个模态框
  • myModal：模态框的id
  • 使用场景：仅仅需要弹出模态而已，不需要再进行其它的操作

js 方式

$('#myModal').modal('show') // 弹出--id为myModal的模态框

$('#myModal').modal('hide') // 隐藏id为myModal的模态框
  • 使用场景：当需要弹出模态框的同时，还有一些其它的业务需要处理

事件委托

  • 添加给最近的非动态的父容器
  • 在进行事件处理的时候，判断是否是当前所需要的元素
// 1.填充原始数据--它仅仅是填充数据，而不是实现编辑的功能
tbody.addEventListener('click', function(e) {
    if (e.target.classList.contains('btnedit')) {
        // 弹出模态框
        $('#editModal').modal('show')
    }

模态框的数据填充

本质上都是对元素赋值

  • 获取需要赋值的元素
  • 获取数据
  • 进行赋值

获取需要赋值的元素

let editbookname = document.querySelector('input[name=editbookname]')
let editauthor = document.querySelector('[name=editauthor]')
let editpublisher = document.querySelector('[name=editpublisher]')

存储数据

  • 使用自定义属性的方式将数据存储到元素中
  • 在列表中的编辑按钮事件中，我们可以通过e.target拿到当前的编辑按钮，所以可以将数据存储到编辑按钮中
  • 修改模板，在元素使用data-自定义属性的方式存储数据
<button type="button" data-bookname='${value.bookname}' data-author='${value.author}' data-publisher='${value.publisher}' class="btn btn-link btn-sm btnedit">

获取数据并赋值给元素

通过data-设置的自定义属性，通过dataset获取，获取到的是一个对象

tbody.addEventListener('click', function(e) {
    if (e.target.classList.contains('btnedit')) {
        // 弹出模态框
        $('#editModal').modal('show')
        // 获取自定义属性的值
        let data = e.target.dataset
        // 展示默认数据
        editbookname.value = data.bookname
        editauthor.value = data.author
        editpublisher.value = data.publisher
    }
})

实现编辑功能

这个操作在操作后台数据，它是一个服务器请求操作

编辑功能没有特别意外(没有意外)都需要基于数据id进行操作

凡是操作服务器的数据，都需要基于接口，所以一定要查看接口文档

  • 看url：www.itcbc.com:3006/api/updateb…
  • 看method：PUT
  • 看要什么参数，特别注意要图书的id
  • id4Number是图书id
    bookname朝花夕拾String是书名（2~10位）
    author鲁迅String是作者（2~10位）
    publisher北京出版社String是出版社（2~10位）

获取参数

重点关注如何获取到当前图书的id

其它值都是来自于模态框中的表单元素

id的获取

  • 以自定义属性的方式将数据id存储到列表中的编辑按钮

    <button type="button" data-id='${value.id }' data-bookname='${value.bookname}' data-author='${value.author}' data-publisher='${value.publisher}' class="btn btn-link btn-sm btnedit">
编辑</button>

  • 在列表中的编辑按钮的事件中获取id

  • 细节：id可以在列表中的编辑按钮中获取，但是我们需要在模态框中的确定按钮中使用

    • 定义一个全局变量用于id的存储

      let currentBookId //当前所需要编辑的图书id

    • 将id获取之后存储到全局

      // 获取自定义属性的值
let data = e.target.dataset
currentBookId = data.id

发起ajax请求

// 2.实现编辑功能:单击模态框中的“确定”按钮
btnConfirm.addEventListener('click', function() {
    // 收集数据
    let data = {
        id: currentBookId,
        bookname: editbookname.value,
        author: editauthor.value,
        publisher: editpublisher.value
    }
​
    // 发起请求
    axios({
        url: 'http://www.itcbc.com:3006/api/updatebook',
        method: 'PUT',
        data
    }).then(res => {
        alert('成功了')
        // 隐藏模态框
        $('#editModal').modal('hide')
        init()
    })
})
avatar
文章
阅读
粉丝