首页 > 解决方案 > Bootstrap 4 modal 无法在移动设备上运行 - 无法关闭模态或正确查看它

问题描述

尝试在块中使用 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>

在此处输入图像描述

标签: jquerycssbootstrap-4

解决方案


在标签中的文件中添加此 css

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

它对我有用!


推荐阅读