Html 引导模式关闭按钮在较小屏幕上不工作

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

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

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

---

在模态主体内添加按钮标记

<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>  

&时代；
标题在这里。

文本在这里。

这里是代码笔链接供参考

---

希望这能起作用。

可能在小屏幕上，按钮被其他元素覆盖。通过添加高z索引来解决此问题：

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

---

尝试添加模式的整个代码，因为错误可能出现在包含此按钮的div中。是否包含bootstrap.js文件？@RidoanSalehNasution是的，我将其包含在

中。是否可以为代码创建一个新的窗口？不，按钮在较小的屏幕上仍然不起作用。

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

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