在DoubleClick事件上使用原生JavaScript打開自定義引導模式-有解無憂

我想在雙擊元素時使用來自物件的資料打開自定義引導模式。如何使用 vanilla JavaScript 做到這一點。

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

輕松過渡
單擊十字架或身體外部時，模態應該洗掉
總是清除以前的資料（不快取）

https://jsfiddle.net/awo0hq4c/

注意：使用的模態是基本的引導模態，如下所示，但在我的情況下，它不是按鈕，而是一個 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>```

uj5u.com熱心網友回復：

將此行代碼附加到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 >
                                <div >
                                    <div >
                                    <h5  id="exampleModalLabel">${data.title}</h5>
                                    <button type="button"  data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div >
                                    ${data.value}
                                    </div>
                                    <div >
                                    <button type="button"  data-bs-dismiss="modal">Close</button>
                                    <button type="button" >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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p"
      crossorigin="anonymous"
    ></script>
    <!-- <script src="./modal.js"></script> -->
  </body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/429649.html

標籤：javascript 推特引导引导模式双击

上一篇：為什么在打開Bootstrap模式時我的選擇下拉選單默認打開？

下一篇：Div在flex容器中添加了很多頂部邊距導致對齊問題