如何在每次单击时停止显示我的模态？

2024-05-09 • 问答

我目前正在将HTML的模式附加到TD。我目前有一个显示附加模态的函数，但是，每次我单击模态时，它都会运行我单击TD时的代码（它将模态算作TD的一部分），因此不断显示相同的模式。

我尝试过：

      document.addEventListener("show",function(){
      $('td').off("click");
      });

甚至：

 $(this).off("click",`#${modalId}`);

JavaScript

$('td').on('click',function(e) {

$('td').removeclass("selectedDate");
$(this).addClass("selectedDate");
var n = $(this).find('.date').text(); //selects the date input for the cell.
    let ordN = n + (n > 0 ? ['th','st','nd','rd'][(n > 3 && n < 21) || n % 10 > 3 ? 0 : n % 10] : '');

let modal= $('.modal').clone(true);
$(this).append(modal);
let modalId= `${months[currentMonth]}-${n}-${currentYear}`;
modal.attr('id',`${modalId}`);


 $(this).find('#modalHeader').text(`${months[currentMonth]} ${ordN} ${currentYear}`);

 $(this).find(`#${modalId}`).show();
 document.addEventListener("show",function(){
   $('td').off("click");
  console.log('working')
 });
 console.log(this);
 $(this).off("click",`#${modalId}`);
 });

无论我在哪里看，我似乎都找不到解决此问题的方法...

您需要为每个模式的点击事件处理程序停止传播。

我同意其他答案，即整个页面应该只有一个模式可以显示和隐藏。

关于您的注释：为了“附加到给定的表单元格”，您应该参数化模态窗口的唯一实例。

months = ["Jan","Feb"];
currentMonth = 0;
currentYear = 2035;

$('td').on('click',function(e) {

  $('td').removeClass("selectedDate");
  $(this).addClass("selectedDate");
  var n = $(this).find('.date').text(); //selects the date input for the cell.
  let ordN = n + (n > 0 ? ['th','st','nd','rd'][(n > 3 && n < 21) || n % 10 > 3 ? 0 : n % 10] : '');

  let modal = $('#modalTemplate').clone(true);
  $(this).append(modal);
  let modalId = `${months[currentMonth]}-${n}-${currentYear}`;
  modal.attr('id',`${modalId}`);


  modal.find('#modalHeader').text(`${months[currentMonth]} ${ordN} ${currentYear}`);

  modal.show();
  modal.on('click',function(e) {
    e.stopPropagation();
  });

});

.modal {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input class="data" /></td>
    <td><input class="data" /></td>
  </tr>
  <tr>
    <td><input class="data" /></td>
    <td><input class="data" /></td>
  </tr>
</table>


<div class="modal" id="modalTemplate">
  <span id="modalHeader"></span> 
  Hello Modal
</div>

我认为您可能误解了应该如何使用模态。

根据我的经验，它们应该始终位于页面底部（否则您可能会遇到各种位置/大小问题，背景无法正常工作等等）。

因此，请勿将模式附加到td。只需将其放在页面底部，然后调用$（“。modal”）。modal（'show'）;

我不明白您为什么要克隆模式。我假设这可能是因为您希望每次使用后都可以“重置”模态。如果是这种情况，只需使用一个模态。但是在打开模态之前刷新/注入模态内容。为此有多种技术。一些简单的javascript可以做到，可以通过模板解决，或者在某些情况下可以通过ajax加载模式内容来解决。一切都取决于。

例如，您可能会做类似的事情

<div class="my-modal-content d-none">[put you modal content html here]</div>

<div class="modal my-modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
      ...
      </div>
      <div class="modal-body">

      </div>
      <div class="modal-footer">
       ...
      </div>
    </div>
  </div>
</div>

然后您可以使用这样的脚本

$('td').on('click',function(e) {
    var modalContentHtml = $(".my-modal-content").html();
    $(".my-modal .modal-body").html(modalContentHtml);

    // Do event binding to the modal content if necessary

    $(".my-modal").modal('show');

}

如何在每次单击时停止显示我的模态？

duxiaob 回答：如何在每次单击时停止显示我的模态？

大家都在问