Javascript 单击时引导模式未正确显示<；a>；标签

我正在点击一个

@包括（‘城市模式’）

在city modal.blade.php中

<div>
    <a class="header-text" href="#" data-toggle="modal" data-target="#changeCity">Change City</a>
                @include('city-modal')
</div>

<div class="modal fade" id="changeCity" tabindex="-1" role="dialog" aria-labelledby="changecitytitle" >
    <div class="modal-header">
        <div layout="row">
            <a href="#">
                <img class="app-header__logo" src="{{ assetPath('images/innocity-logo.png') }}">
            </a>
            <h5 class="modal-title" id="changecitytitle">Choose Your City</h5>
        </div>
    </div>
    <div class="modal-body">
        <div layout="row">
            <div layout="column">
                <a href="#">
                    <img class="app-header__logo" src="{{ assetPath('images/ahmedabad-city.png') }}">
                </a>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Ahmedabad</button>
            </div>
            <div layout="column">
                <a href="#">
                    <img class="app-header__logo" src="{{ assetPath('images/jaipur-city.png') }}">
                </a>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Jaipur</button>
            </div>
        </div>
    </div>
</div>

选择你的城市
艾哈迈达巴德
斋浦尔

您没有为模式使用正确的标记。应该是：

<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
      </div>
      <div class="modal-body">
        ...
      </div>
    </div>
  </div>
</div>

情态标题
...

注意

模式对话框

和

模式内容

的使用

---

他可能在使用B3。问题标记为BS4，BS3也使用了模态对话框，模态内容。背景也位于模态的前面，而不是后面，因此我无法点击模态本身，因为它可能与已回答的原始问题无关