当按钮位于可链接行内时，如何使用 Bootstrap 模式按钮？答案

【问题标题】：How can i use a Bootstrap modal button when the button is inside a linkable row?当按钮位于可链接行内时，如何使用 Bootstrap 模式按钮？
【发布时间】：2022-01-12 23:33:37
【问题描述】：

我有一个奇怪的问题。在我的项目中，我想在可链接行中使用模式按钮。问题是，当我单击触发模式 id 的按钮时，它会弹出然后重定向到 myexample.com 页面，这是绝对正常的。我知道我可以将按钮移到可链接行之外，但就我而言，我需要将它放在里面。检查下面的代码：

<a href="http://somelinkhere.com">
<div class="row">
<div class="col-lg-12">SOME CONTENT HERE</div>

<button type="button" class="btn" data-toggle="modal" data-target="#modalId" >Open Modal Button</button>
</div>
</a>

【问题讨论】：

为什么需要在 a 标签内？如果需要它去某个 URL 或类似的问题，那么只需在按钮上添加一个点击处理程序

标签： html bootstrap-4

【解决方案1】：

你可以使用event.preventDefault()：

document.querySelector("#launchmodal").addEventListener("click", function(e){
  e.preventDefault();
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Button trigger modal -->

<a href="https://stackoverflow.com/">
  link 
  <button id="launchmodal" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    Launch demo modal
  </button>
  link
</a>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

【讨论】：