javascript - 无法让 DIV 在 Javascript 监听器事件中可见

Question

这是一段 HTML:

<div id="deletegroup" class="modal-open" role="dialog" 
 style="display:none;">

这是来自 Javascript 事件监听器的代码:

'onbtDeleteClick': function (e) {
     var modal = document.getElementById("deletegroup");
     modal.style.display = "block";      
     this.syncData("btDelete_Click");
 },

当我的列表页面打开时，有一个项目列表，每行都有一个垃圾桶，如果单击则删除该行。

问题是单击垃圾桶时，名为“onbtDeleteClick”的监听器事件应该显示 DIV，它是 HTML 页面上的模态，而 DIV/模态未呈现。

欢迎任何想法!

Answer 1

如果您试图让 div 在单击按钮时显示，请确保它具有内容或具有设置的宽度和高度。否则，它不会显示。

检查这个 working example .

$(window).ready(()=>{
    $('#btn-open-modal').on('click', ()=>{
    $('#modal-1').toggleClass('hide');
  });
})

#modal-1 {
  background-color:black;
  width : 50vw;
  height : 10vh;
  position: absolute
}

.hide {
  display:none;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<div id="modal-1" class="modal-dialog hide">
</div>
<div class="content" id="content-1">
  <p> Sample Conten Here </p>
</div>
<br>
<input type="button" value ="open modal" id="btn-open-modal">

另一方面，您可以使用 bootstrap处理您的模态要求。此外，如果您正在使用 ASP.NET(因为标签中有 C#)并选择使用 Bootstrap ，您可以将 Bootstrap 模式使用的属性分配给 ASP 按钮，如下所示:

      <asp:Button ID="BtnDelete" runat="server" Text="..." CssClass="..."
              data-toggle="modal" data-target="#ModalExample" />

否则，.NET 提供的 ASP 按钮控件有一个 OnClientClick 属性，您可以在其中传入一些客户端 javascript 代码，以便在单击按钮时调用。常规 HTML 按钮具有 onserverclick :)