模式弹出窗口在表的下拉菜单中不起作用

Question

我想在我的表下拉菜单中放置一个引导 (v3( 模态视图，但它不起作用。当我按下下拉菜单的删除按钮时，屏幕变暗几秒钟，但它不会弹出模态视图。

如果我将模态代码复制到另一个页面进行测试，它会成功运行。

表数据来自带有 node.js 的后端。 如果您需要更多信息，可以告诉我。

.dropdown {
position: relative;
display: inline-block;
}
.dropbtn {
color: white;
width: 150px;
height: 60px;
border: none;
cursor: pointer
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-ms-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-o-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover,
.dropdown-content a:focus {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content,
.dropdown:focus .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn,
.dropdown:focus .dropbtn {
background-color: #3e8e41;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<td class="td1" style="border-bottom:#979797 solid 1px;">
<div class="dropdown" style="float: left">
<a href="#"><img src="/images/dots.png"></a>
<div class="dropdown-content" style="left:0">
<form action="/editProInfo" method="POST" novalidate>
<input type="hidden" name="Id" value="<%= ProInfoList[j].Id %>" />
<button class="dropbtn" style="background-color:transparent; border:0; display: inline-block; margin-bottom: -35px;">
<a>Edit</a>
</button>
</form>
<button href="#myModal" data-toggle="modal" class="dropbtn" style="background-color:transparent; border:0;margin-bottom: -10px"> 
<a>Delete</a>
</button>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to delete ?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data- dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Delete</button>
</div>
</div>
</div>
</div>
</div>
</div>
</td>

Answer 1

我可以在您的代码中看到一个错误，将按钮href更改为data-target。这可能会解决您的问题。

替换此行：

<button href="#myModal" data-toggle="modal" class="dropbtn" style="background-color:transparent; border:0;margin-bottom: -10px"><a>Delete</a></button>

跟

<button data-target="#myModal" data-toggle="modal" class="dropbtn" style="background-color:transparent; border:0;margin-bottom: -10px">Delete</button>

data-target="#myModal"指向模态的 ID。

Answer 2

我遇到了类似的问题。

请检查您的脚本。黑屏出现几秒钟，由于代码重复而消失。

有时，我们将代码保存在脚本标签下的 HTML 文件中，也保存在导致函数运行两次的 js 文件中。