javascript - 单击 <a> 标签时 Bootstrap 模式无法正确显示

Question

我正在点击<a>标签打开一个必须垂直显示在中心的模态。当我点击标签时，没有任何显示。整个 div 已渲染，但模态不会显示在带有背景的中心。

在 header.blade.php

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

在 city-modal.blade.php

<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>

Answer 1

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

<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>

注意 modal-dialog 和 modal-content 的使用。

https://getbootstrap.com/docs/4.0/components/modal/#vertically-centered