仅移动端显示Modal失效，JS/jQuery/CSS均无法实现求排查

嘿，我帮你梳理下当前代码里的几个核心问题，这些就是导致模态框无法只在移动端显示的原因：

1. 窗口宽度获取方法错误 #

你写的$(window).clientWidth()是不对的——jQuery的$(window)对象并没有clientWidth这个方法，正确的写法应该用$(window).width()，或者原生JS的window.innerWidth来获取当前窗口的宽度。

2. 点击事件冲突+默认行为未拦截 #

你的结构里，figcaption被包在带data-toggle="modal"的<a>标签里，这个a标签本身就会通过Bootstrap的内置逻辑触发模态框，不管屏幕大小，直接覆盖了你写的JS判断。而且你把点击事件绑定在img上，但用户实际点击的是figcaption（在a标签内部），所以你的img点击事件大概率根本没触发过。

3. 文本选择器范围太宽泛 #

$('figcaption').text()会把页面上所有figcaption的文本都取过来，如果以后页面有多个类似模块，模态框内容就会乱掉，应该只获取当前点击元素对应的那个figcaption的文本。

修正后的完整代码 #

HTML部分（调整a标签属性，去掉默认触发逻辑） #

<div class="col-5 col-sm-2 ml-auto aboutMid aboutMid1">
 <figure class="cap-left">
 <img src="http://www.classichits.ie/wp-content/uploads/2016/12/house.png" class="img-fluid">
 <!-- 去掉data-toggle="modal"，阻止Bootstrap默认触发模态框 -->
 <a href="#myModal" role="button" class="modal-trigger"><figcaption> The house is a converted farm building featuring traditional wooden shutters and terracotta toof tiles </figcaption></a>
 </figure>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true">
 <div class="modal-dialog" role="document">
 <div class="modal-content">
 <div class="modal-header">
 <h5 class="modal-title" id="ModalLabel">Here is a Modal title</h5>
 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 <span aria-hidden="true">&times;</span>
 </button>
 </div>
 <div class="modal-body">
 Here goes the content of the modal.
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
 <button type="button" class="btn btn-warning">Save</button>
 </div>
 </div>
 </div>
</div>

JS部分（修正逻辑，绑定正确事件） #

// 保留Bootstrap模态框的show事件逻辑（如果不需要#myInput的话可以注释掉这部分）
$('#myModal').on('show.bs.modal', function () {
 // 注意：你的原代码里#myInput元素不存在，若要使用请先在页面添加该元素
 // $('#myInput').focus()
})

// 绑定到我们新增的modal-trigger类的点击事件
$(".modal-trigger").click(function(e) {
 // 阻止a标签的默认锚点跳转行为
 e.preventDefault();
 // 正确获取当前窗口宽度
 if ($(window).width() < 768) {
   // 精准获取当前点击的a标签内的figcaption文本
   const captionText = $(this).find('figcaption').text();
   $('.modal-body').html(captionText);
   $('#myModal').modal('show');
 }
 // 桌面端啥也不做，模态框不会弹出
});

额外小提示 #

• 我给a标签加了modal-trigger类，这样可以精准绑定事件，不会影响页面其他a标签。
• 如果想让点击图片也触发同样的逻辑，可以把事件绑定到figure标签上，然后用$(this).find('figcaption')来获取文本就行。

内容的提问来源于stack exchange，提问作者DoeysGac