Bootstrap4 modal is not working on mobile and tabl

问题:

Modal is not working on mobile and tablet. I am using bootstrap4 modal in angular7.

Below is the code which i used to open a modal. Below code used in app.component.html to open a modal. Please help.

<div class="row">

  <div class="col-12 cancel-exit-block">

    <li><a href="#" onclick="void(0)" data-toggle="modal" data-target="#openAllowModal">Modal</a></li>
  </div>
</div>

<div class="modal fade" id="openAllowModal" role="dialog">
  <p>open modal</p>
</div>

回答1:

To open a bootstrap modal you always need a div with the class modal-dialog and a div with the class modal-content You can give a look to some example here: https://getbootstrap.com/docs/4.0/components/modal/

So try to transform your last div

<div class="modal fade" id="openAllowModal" role="dialog">
  <p>open modal</p>
</div>

to this

<div class="modal fade" id="openAllowModal" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <p>open modal</p>
    </div>
  </div>
</div>