无法让 DIV 在 Javascript 侦听器事件中可见

Question

这是HTML的一个片段：

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

以下是 Javascript 中事件 Listener 的代码：

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

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

问题是当单击垃圾桶时，名为"onbtDeleteClick"的侦听器事件应该显示 DIV，它是 HTML 页面上的模态，并且 DIV/模态不会被呈现。

欢迎任何想法！

Answer 1

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

查看此工作示例。

$(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">

另一方面，您可以使用引导来处理您的模态要求。此外，如果您正在使用 ASP.NET(因为您在标记中具有C#(并选择使用引导程序，则可以将引导模式使用的属性分配给 ASP 按钮，如下所示：

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

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