Question

对于某些模态，我使用屏幕右上角的“x”按钮来关闭模态。虽然该按钮适用于较大的设备（当宽度大于768像素时），但我发现该按钮不适用于较小的设备（例如移动设备上）。

这是我用于关闭按钮的HTML，我直接从Bootstrap文档中获取：

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

我还添加了类close-btn以将字体大小更改为2.5 em以使其更大。

编辑：这是完整的模态：

<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="close-btn" aria-hidden="true">&times;</span></button>
        <div class="row">
            <div class="col-lg-12">
                <div class="modal-body">
                    <h2 class="text-center">Title here.</h2>
                    <hr class="star-primary">

                    <h3 class="text-center">
                        Text here.
                    </h3>

                    <br />
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

在模态体

中添加按钮标签

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

                    <h2 class="text-center">Title here.</h2>
                    <hr class="star-primary">

                    <h3 class="text-center">
                        Text here.
                    </h3>

                    <br />
                </div>

以下是用于参考的codepen链接

https://codepen.io/chandrashekhar/pen/weBOvy?editors=1100

希望这有效..

Answer 2

可能在小屏幕上按钮被其他元素覆盖。通过添加高z-index解决它：

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

CSS：

.my-close{
    z-index:999;
}

Bootstrap Modal关闭按钮不能在较小的屏幕上工作

2 个答案: