不使用 JS、jQuery 或 CSS 隐藏的模态

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>

这会使链接的标题在 768 像素及以上的屏幕上消失，并使未链接的标题从 768 像素开始出现。

Answer 2

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

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

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