Bootstrap 模态关闭按钮在较小的屏幕上不起作用答案

【问题标题】：Bootstrap Modal close button not working on smaller screensBootstrap 模态关闭按钮在较小的屏幕上不起作用
【发布时间】：2017-11-06 22:10:23
【问题描述】：

对于某些模式，我使用屏幕右上角的“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>

【问题讨论】：

尝试添加模式的整个代码，因为错误可能在包含此按钮的 div 中。
你是否包含了 bootstrap.js 文件？
@RidoanSalehNasution 是的，我将它包含在<head> 中。
您可以为您的代码创建一个fiddle 吗？

标签： html twitter-bootstrap-3

【解决方案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

希望这有效..

【讨论】：

不，该按钮在较小的屏幕上仍然无法使用。

【解决方案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;
}

【讨论】：