Question

我想将Boostrap Modal视图放在表格的下拉菜单中，但是没有用。有一个问题，当我按下下拉菜单中的“删除”按钮时，屏幕变暗了几秒钟，但没有弹出模式视图。

我将模式代码复制到另一个html进行测试，它成功运行。我是网站编程的初学者，请帮助我，谢谢高级。

表数据是node.js的后端语言。如果您需要更多信息，可以告诉我。

我的下拉菜单CSS

.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;
}

我的表格代码

<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

我们无法运行您的代码，

但是我可以在您的代码中看到一个错误，

将按钮Makefile更改为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>指向模式的ID。

Answer 2

我也遇到过类似的问题。

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

有时，我们会将代码保存在脚本标记下的HTML文件和js文件中，由于该函数运行两次。

在表格的下拉菜单中，Boostrap3 Modal弹出窗口不起作用

2 个答案: