Question

我试图仅在移动设备上显示模态。

即使我非常确定我的JS是正确的，但它无法正常工作

有人可以看看吗？

<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">
                                <a href="#myModal" role="button" data-toggle="modal"><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

$('#myModal').on('show.bs.modal', function () {
      $('#myInput').focus()
    })  

$("img").click(function() {
  if ($(window).clientWidth() < 768) {
    $('.modal-body').html($('figcaption').text());
    $('#myModal').modal('show');
    }
});

目前我没有任何影响它的CSS

由于

Answer 1

实现目标的一种方法是使用本机Bootstrap 4类。

例如，d-block类将显示模态（d代表显示）。当你另外添加d-sm-none类时，它不会在sm（小）或更大的设备上显示模态。

当然，sm断点是Bootstrap 4中的768px断点。

因此，如果您将d-block d-sm-none类添加到模态中，即使不使用JavaScript，也应该获得所需的效果。

要解决灰色背景的问题，你可以将相同的技巧（相反）应用到figcaption，如下所示：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<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">
        <a href="#myModal" role="button" data-toggle="modal" class="d-inline d-md-none"><figcaption>
            The house is a converted farm building featuring traditional wooden shutters and terracotta toof tiles
            </figcaption></a>
        <figcaption class="d-none d-md-inline">
            The house is a converted farm building featuring traditional wooden shutters and terracotta toof tiles
        </figcaption>
    </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>



<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

这使得链接标题在768px及以上屏幕上消失，并使得未链接的标题从768px开始显示。

Answer 2

如果只是希望它显示的小型设备，您可以使用Bootstrap的hidden-md-up或hidden-sm-up。这意味着设备> 768px将不会显示模态。

<div class="hidden-md-up">
 //content
</div>

查看Bootstrap的Responsive utitlities。非常方便需要响应的项目。

Modal没有隐藏JS，jQuery和CSS

2 个答案: