Question

我需要弹出这样的弹出窗口，但只需要一张图片： Bootstrap Pop up modal

模式必须放在我的网站底部“TekniskeØvelser”

下

对我来说问题是我必须在这里使模态代码符合下面的代码。 html代码调用了一些重要的类，并且还在我的页面上保留了结构。我可以设置我想要的图像，但随后调用一个href，其中必须调用模态。

有人有一个很好的解决方案吗？

<div class="col-md-3 col-sm-6 col-xs-12">
            <article class="block-thumbnail">
                <a href="/courses/AU-pensum/visualisering-og-projektkommunikation/tekniske-ovelser/tekniske-ovelser-2.pdf" class="block-thumb">
                    <div class="block-image">
                        <div class="overlay"></div>
                        <img  src="/images/thumbs/image4.jpg" data-toggle="modal" data-target="#myModal4" alt="Trolltunga, Norway">

                    </div>
                </a>
                <div class="block-data">
                    <h3>
                        Konceptuelt Design
                    </h3>
                </div>
            </article>
        </div>

当我将鼠标悬停在图像上时，Futheron没有箭头。

Answer 1

要使用nivo-lightbox将内容加载到弹出式模式中，请参阅文档以获取更多信息http://docs.dev7studios.com/article/21-loading-ajax-iframe-inline-content

下面我使用ajax方法来加载你可以尝试的pdf。希望有所帮助

$(document).ready(function() {
  $('a').nivoLightbox();
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/nivo-lightbox/1.3.1/nivo-lightbox.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/nivo-lightbox/1.3.1/themes/default/default.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/nivo-lightbox/1.3.1/nivo-lightbox.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nivo-lightbox/1.3.1/nivo-lightbox.js"></script>

<a href="image_large.jpg" title="This is an image title">
  <img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-1.jpg" alt="" />
</a>
<a data-lightbox-type="ajax" href="https://vouzalis.com/courses/AU-pensum/visualisering-og-projektkommunikation/forelaesninger-slides/Undervisning1.pdf">click image</a>

调用bootstrap模式而不是href

1 个答案: