在 DoubleClick 事件中使用普通 JavaScript 打开自定义 bootstrap 模式

Question

我想在双击某个元素时使用来自 object 的数据打开自定义 bootstrap 模式。如何使用 vanilla JavaScript.

做到这一点

还有如何在其中添加所有功能：

轻松过渡
当点击 body
总是清除以前的数据（无缓存）

注意：使用的模态是基本的 bootstrap 模态，下面给出但不是按钮，在我的例子中是 div

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

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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>```

Answer 1

将这行代码附加到 showModal() 函数的最后一行。

new bootstrap.Modal(modalItem).show();

https://getbootstrap.com/docs/5.0/components/modal/#via-javascript

 const div = document.querySelector('.container');

  div.addEventListener('dblclick', (event) => {
    showModal({
      id: '1',
      title: 'Title Modal',
      value: 'this is modal content',
    });
  });

  const showModal = (data) => {
    console.log(data, 'here is');
    const modalItem = document.getElementById('exampleModal');

    modalItem.innerHTML = '';

    modalItem.innerHTML = ` <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">${data.title}</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                    ${data.value}
                                    </div>
                                    <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>
                          `;

    new bootstrap.Modal(modalItem).show();
  };

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Modal</title>
    <!-- CSS only -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <!-- <link rel="stylesheet" href="./modal.css"> -->
  </head>
  <body>
    <!-- Modal -->
    <div
      class="modal fade"
      id="exampleModal"
      tabindex="-1"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    ></div>

    <div class="btn btn-primary container">Launch modal</div>

    <!-- JavaScript Bundle with Popper -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>
    <!-- <script src="./modal.js"></script> -->
  </body>
</html>

在 DoubleClick 事件中使用普通 JavaScript 打开自定义 bootstrap 模式

Open custom bootstrap modal with vanilla JavaScript on DoubleClick event

javascript

twitter-bootstrap

bootstrap-modal

double-click