Bootstrap 实现回退历史记录关闭模态框

[iuroc]

1. 创建模态框元素和模态框实例，设置 data-bs-backdrop 为 static

   import { Modal } from 'bootstrap'
   
   export const modalElement = div({
       class: `modal fade`,
       'data-bs-backdrop': 'static'
   },
       div({ class: 'modal-dialog' }, '...')
   )
   van.add(document.body, modalElement)
   export const modal = new Modal(modalElement)

2. 不使用 data-bs-dismiss=modal 关闭模态框，改为使用 history.back()

   button({
       class: 'btn-close',
       onclick: () => history.back()
   })

3. 设置模态框的 shown.bs.modal 事件，定向到新的 Hash

   modalElement.addEventListener('shown.bs.modal', () => {
       location.hash = '#/myModal' 
   })

4. 设置模态框的 hidePrevented.bs.modal 事件，执行 history.back()

   modalElement.addEventListener('hidePrevented.bs.modal', () => {
       history.back()
   })

5. 在需要触发模态框的 Route 的载入事件中，判断模态框元素的 display 属性，如果是 block，则关闭模态框

   import { modalElement, modal } from './modalRoute'
   
   export default Route({
       name: 'oldRoute',
       onLoad() {
           if (modalElement.style.display == 'block') modal.hide()
       }
   })