Bootstrap 4 модальный не работает на мобильном телефоне - не может закрыть модальный или просмотреть его правильно

Question

При попытке использовать модал Bootstrap 4 в блоке он не отображается правильно. Он как бы отображает модальный режим, но все еще находится в режиме «постепенного исчезновения», и тогда вы не можете закрыть модальный режим - единственный выход - обновить браузер.

<div class="modal fade" id="cartConfirm" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12 confrm-cart-box">
                            <div class="close-btn" data-dismiss="modal"><i class="fa fa-times"></i></div>
                            <h3>order confirmation</h3>
                            <br>
                            <br>
                            <p>Order number <span class="green">123456</span> is now confirmed<br> You can check your order and its progress at any time.<br> By logging into your account</p>
                            <a href="#" data-toggle="modal" data-target="#multi-login" data-dismiss="modal">Log In</a>
                            <p>We have emailed you the order details for your convenience.</p>
                            <p>If you have any queries please contact us.</p>
                            <p><span class="green">This order is covered by our 100% No Quibble Money Back Guarantee</span></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<button data-toggle="modal" data-dismiss="modal" data-target="#cartConfirm">BUY</button>

Answer 1

Вам просто нужно добавить кнопку закрытия. По этому коду после <div class='modal-content'>

<button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
</button>

Попробуйте этот код,

<div class="modal fade" id="cartConfirm" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <div class="container">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
          <div class="row">
            <div class="col-lg-12 confrm-cart-box">
              <div class="close-btn" data-dismiss="modal"><i class="fa fa-times"></i></div>
              <h3>order confirmation</h3>
              <br>
              <br>
              <p>Order number <span class="green">123456</span> is now confirmed<br> You can check your order and its progress at any time.<br> By logging into your account</p>
              <a href="#" data-toggle="modal" data-target="#multi-login" data-dismiss="modal">Log In</a>
              <p>We have emailed you the order details for your convenience.</p>
              <p>If you have any queries please contact us.</p>
              <p><span class="green">This order is covered by our 100% No Quibble Money Back Guarantee</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<button data-toggle="modal" data-dismiss="modal" data-target="#cartConfirm">BUY</button>

Вот скрипка,

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<div class="modal fade" id="cartConfirm" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <div class="container">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
          <div class="row">
            <div class="col-lg-12 confrm-cart-box">
              <div class="close-btn" data-dismiss="modal"><i class="fa fa-times"></i></div>
              <h3>order confirmation</h3>
              <br>
              <br>
              <p>Order number <span class="green">123456</span> is now confirmed<br> You can check your order and its progress at any time.<br> By logging into your account</p>
              <a href="#" data-toggle="modal" data-target="#multi-login" data-dismiss="modal">Log In</a>
              <p>We have emailed you the order details for your convenience.</p>
              <p>If you have any queries please contact us.</p>
              <p><span class="green">This order is covered by our 100% No Quibble Money Back Guarantee</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<button data-toggle="modal" data-dismiss="modal" data-target="#cartConfirm">BUY</button>

Надеюсь, это поможет вам.