Question

所以，我在我的图片中创建了这个标题，以便当用户将鼠标悬停在符号上时显示，如图所示

正如预期的那样（我猜），由于图像的大小，它无法在移动设备/平板电脑上运行。

如果用户点击图片（在手机和平板电脑尺寸上）以便弹出标题（图片外部，以便用户可以阅读？），我该怎么做？

像这样：

由于

HTML

<div class="col-5 col-sm-2 ml-auto aboutMid aboutMid1">
                            <figure class="cap-left">
                                <img src="assets/about/about1.jpg" class="img-fluid">
                                <figcaption>
                                    The house is a converted farm building featuring traditional wooden shutters and terracotta toof tiles
                                </figcaption>
                            </figure>
                        </div>

CSS

    figure { 
    display: block; 
    position: relative; 
    overflow: hidden; 
}

figcaption { 
    position: absolute; 
    background: rgba(0,0,0,0.75); 
    color: white; 
    padding: 10px 20px; 

    opacity: 0;
    bottom: 0; 
    left: -30%;
    -webkit-transition: all 0.6s ease;
    -moz-transition:    all 0.6s ease;
    -o-transition:      all 0.6s ease;
}

figure:hover figcaption {
    opacity: 0.9;
    left: 0;
    font-size: 1em;
}

figure:before { 
    content: "?"; 
    position: absolute; 
    background: rgba(255,255,255,0.75); 
    color: black;
    width: 24px;
    height: 24px;
    -webkit-border-radius: 12px;
    -moz-border-radius:    12px;
    border-radius:         12px;
    text-align: center;
    font-size: 12px;
    line-height: 24px;
    /* Only Fx 4 supporting transitions on psuedo elements so far... */
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    opacity: 0.75;  
}

figure:hover:before {
    opacity: 0;
}

.cap-left figcaption { bottom: 0; left: -30%; }
.cap-left:hover figcaption { left: 0; }
.cap-left:before {  bottom: 10px; left: 10px; }

我的JS从bootstrap导入

     <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <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.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

Answer 1

您可以使用简单的引导模式，只有在移动设备上或某个窗口宽度时才会触发。

这是fiddle

添加引导程序模式并确保它没有获得任何不需要的自定义css，您可以将其添加到所有自定义div之外以防止这种情况发生。

Bootstrap modal, which I used

然后你使用简单的JS：

$("figure").click(function() {
  if ($(window).width() < 960) {
    $('.modal-body').html($('figcaption').text());
    $('#myModal').modal('show');
    }
});

它会检查您是否在小型设备上（在我的情况下，宽度为960px），如果为true，则打开模式，否则不会发生任何事情。

此外，您可以检查这样的移动设备：

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // some code..
}

最后一部分来自：

What is the best way to detect a mobile device in jQuery?

Answer 2

考虑将Bootstrap 4卡片工具与image overlays一起使用，因为它们可以在任何地方使用。

这是一个让你入门的例子：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<style>
    .card-img-overlay {
        display: none;
    }
    .card:hover .card-img-overlay {
        display: block;
    }
</style>

<div class="container">
    <div class="row">
        <div class="col-6 offset-3">
            <div class="card bg-dark text-white">
                <img class="card-img" src="https://placehold.it/400" alt="Card image">
                <div class="card-img-overlay">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    <p class="card-text">Last updated 3 mins ago</p>
                </div>
            </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>

在移动视图上弹出标题？

2 个答案: