Question

当我单击“添加Blogger”时，没有打开模式，而是将页面重定向到主页。我该如何解决该问题？


<a href="#" class="btn btn-outline-light btn-sm" data-toggle="modal" data-target="#addblogger">Add Blogger</a>


<div class="modal fade" id="addblogger">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header bg-success text-white">
        <h5 class="modal-title">Add New Blogger</h5>
        <button class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
      </div>
      <div class="modal-body">

        <div class="modal-footer">

        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

您需要使用模式ID作为a元素的href，否则“＃”将导致重定向。

<a href="#addblogger" class="btn btn-outline-light btn-sm" data-toggle="modal">
  Add Blogger
</a>

您可以按自己的方式进行操作（使用data-target属性），但是您需要在href上使用javascript：void（0）-以避免重定向。我不会这么做

<a href="javascript:void(0)" class="btn btn-outline-light btn-sm" data-toggle="modal" data-target="addblogger">
  Add Blogger
</a>

如果我要使用数据目标并使用btn类-我将使用按钮元素。

<button type="button" class="btn btn-outline-light btn-sm" data-toggle="modal" data-target="addblogger">
  Add Blogger
</button>

如何在Angular 7中修复引导程序模式？

1 个答案: