Bootstrap模式关闭按钮不适用于较小的屏幕

问题描述：

对于某些模式，我使用屏幕右上角的“x”按钮关闭模式。虽然按钮可用于较大的设备（当宽度大于768像素时），但我发现该按钮在较小的设备（例如手机上）上无法使用。Bootstrap模式关闭按钮不适用于较小的屏幕

这是我使用的关闭按钮，我直接下了引导文件的HTML：

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

尝试加入模态的整个代码错误可能是包含该按钮的股利。 –

您是否包含bootstrap.js文件？ –

@RidoanSalehNasution是的，我将它包含在'

'中。 – Lyxpudox

答

添加按钮标签的模态体

<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

希望此作品..

不，该按钮在小屏幕上仍无法使用。 – Lyxpudox

嗨Lyxpudox ..，试试这个新代码 –

谢谢！这终于为我工作。 – Lyxpudox

答

可能在小屏幕上按钮被其他元素覆盖。通过增加一个高的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模式关闭按钮不适用于较小的屏幕

相关推荐