单击<a> tag

Question

I am clicking on an <a> tag to open a modal that must display at the center vertically. When i click on the tag, nothing displays. The entire div is rendered but modal doesnt display in the center with backdrop.

In header.blade.php

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

In 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