Question

以下是HTML的摘要：

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

以下是来自Java中事件监听器的代码：

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

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

问题是，当单击垃圾箱时，名为“ onbtDeleteClick”的侦听器事件应在HTML页面上显示为模态的DIV，并且未呈现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#）并选择使用引导程序，则可以将引导程序模式使用的属性分配给ASP按钮，如下所示：

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

否则，.NET提供的ASP按钮控件具有OnClientClick属性，您可以在其中传递一些客户端javascript代码，只要单击该按钮即可调用。常规HTML按钮具有onserverclick：）

无法使DIV在Javascript Listener事件中可见

1 个答案: