在 DoubleClick 事件上使用 vanilla JavaScript 打开自定义引导模式

Question

I want to open custom bootstrap modal using data from an object when double clicked on an element.我想在双击一个元素时使用来自 object 的数据打开自定义引导模式。 How to do this using vanilla JavaScript.如何使用香草 JavaScript 做到这一点。

Also how to add all functionalities in it:还有如何在其中添加所有功能：

Ease Transition轻松过渡
Modal should remove when clicked on cross or outside of body单击十字架或身体外部时，模态应该删除
always clear the previous data(no caching)总是清除以前的数据（不缓存）

https://jsfiddle.net/awo0hq4c/ https://jsfiddle.net/awo0hq4c/

NOTE: Modal used is basic bootstrap modal which is given below but instead of button it is a div in my case注意：使用的模态是基本的引导模态，如下所示，但在我的情况下，它不是按钮，而是一个 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

Append this line of code into the showModal() function. Append 这行代码进入showModal() function。

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

https://getbootstrap.com/docs/5.0/components/modal/#via-javascript 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> <script src="app:js"></script> <.-- 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 事件上使用 vanilla JavaScript 打开自定义引导模式

问题描述

1 个解决方案

解决方案1
0 2022-01-31 06:36:49

在 DoubleClick 事件上使用 vanilla JavaScript 打开自定义引导模式

问题描述

1 个解决方案

解决方案1 0 2022-01-31 06:36:49

解决方案1
0 2022-01-31 06:36:49