poptrox添加可点击链接/按钮

时间：2017-04-16 14:43:49

标签： javascript

我正在使用poptrox，并希望在弹出时添加一个按钮或链接iframe。我需要能够选择具有额外按钮的弹出窗口。我想按钮喜欢iframe显示的内容。我不知道是否更好的添加按钮或将iframe转换为大按钮。

https://github.com/ajlkn/jquery.poptrox

我的代码 ----- HTML 

<section class="thumbnails">
                            <div>
                            <a href="http://youtu.be/loGm3vT8EAQ" title="Test Text">
                            <img src="images/thumbs/01.jpg" alt="" class="image"/>
                            <h3>Lorem ipsum dolor sit amet</h3>
                            </a>

                                <a href="iframe.html" data-poptrox="iframe,600x400">
                                    <img src="images/thumbs/03.jpg" alt=""  title="thing"/>
                                <h3>Lorem ipsum dolor sit amet</h3>
                                </a>
                            </div>

Javastipt - 

$(function() {

// Vars.
    var $window = $(window),
        $body = $('body'),
        $wrapper = $('#wrapper');

// Breakpoints.
    skel.breakpoints({
        xlarge: '(max-width: 1680px)',
        large:  '(max-width: 1280px)',
        medium: '(max-width: 980px)',
        small:  '(max-width: 736px)',
        xsmall: '(max-width: 480px)'
    });

// Disable animations/transitions until everything's loaded.
    $body.addClass('is-loading');

    $window.on('load', function() {
        $body.removeClass('is-loading');
    });

// Poptrox.
    $window.on('load', function() {

        $('.thumbnails').poptrox({
            onPopupClose: function() { $body.removeClass('is-covered'); },
            onPopupOpen: function() { $body.addClass('is-covered'); },
            baseZIndex: 10001,
            useBodyOverflow: false,
            usePopupEasyClose: true,
            overlayColor: '#000000',
            overlayOpacity: 0.75,
            popupLoaderText: '',
            fadeSpeed: 500,
            usePopupDefaultStyling: false,
            usePopupCaption: true,
            windowMargin: (skel.breakpoint('small').active ? 5 : 50)
        });

    });

}）;

2 个答案:

答案 0 :(得分：1)

您能否添加一些您的方案代码，然后我们可以了解一点呢？

我不准你想要使用Poptrox建立一个画廊，但我不知道你真正想念的是什么。

现在也许这个片段会帮助你。再给我一些信息，我们可以对其进行编辑，看看我们是否可以提供解决方案。

$(function() {
  $('#gallery').poptrox({
    usePopupCaption: true,
    usePopupNav: true,
    popupPadding: 0
  });
});
html, body {
  background: #333;
  color: #fff;
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: Open Sans;
}

h1, h2 {
  font-weight: 200;
  padding: 0;
  color: #fff;
}

h1 {
  font-size: 40px;
  margin: 10px;
}

h2 {
  font-size: 18px;
  text-align: center;
  margin: 10px 0;
}

a {
  color: #ccc;
  font-size: 11px;
  display: inline-block;
  margin: 5px;
  vertical-align: middle;
  text-decoration: none;
  -webkit-transition: opacity .1s;
  transition: opacity .1s;
}
a:hover {
  opacity: .7;
}

section:first-child {
  margin-top: 15px;
}

.devmount {
  position: fixed;
  bottom: 0;
  right: 0;
  height: 20px;
  line-height: 20px;
  text-decoration: none;
  font: 17px Arial;
  color: #fff;
  padding: 10px 40px 10px 0;
  margin-right: 10px;
  background: url(http://media.devmount.de/devmount_small_light.png) right center no-repeat;
  -webkit-transition: background-position .3s, color .3s;
  transition: background-position .3s, color .3s;
}
.devmount span {
  position: absolute;
  right: 3px;
  color: transparent;
  -webkit-transition: inherit;
  transition: inherit;
}
.devmount:hover {
  opacity: 1;
  background-position: left center;
  color: transparent;
}
.devmount:hover span {
  color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/n33/jquery.poptrox/master/jquery.poptrox.js"></script>

<div id="gallery"> 
  <!-- Regular images -->
  <section>
    <!-- image 1--><a href="http://placehold.it/500/09f/fff.png"><img src="http://placehold.it/100/09f/fff.png&amp;text=image1" alt="" title="Just an image (#1)"/></a>
    <!-- image 2--><a href="http://placehold.it/500/0bf/fff.png"><img src="http://placehold.it/100/0bf/fff.png&amp;text=image2" alt="" title="Just an image (#2)"/></a>
    <!-- image 3--><a href="http://placehold.it/500/0df/fff.png"><img src="http://placehold.it/100/0df/fff.png&amp;text=image3" alt="" title="Just an image (#3)"/></a>
  </section>
  <section>
    <!-- YouTube: Must be in share format (http://youtu.be/xxxxxxxxxxx) --><a href="http://youtu.be/loGm3vT8EAQ" data-poptrox="youtube,800x480"><img src="http://placehold.it/100/CC181E/fff.png&amp;text=youtube" alt="" title="A YouTube Video"/></a>
    <!-- Vimeo: Must be in share format (http://vimeo.com/xxxxxxxx) --><a href="http://vimeo.com/22439234" data-poptrox="vimeo,800x480"><img src="http://placehold.it/100/69C8CE/fff.png&amp;text=vimeo" alt="" title="A Vimeo Video"/></a>
    <!-- Soundcloud: Must be in share format (https://api.soundcloud.com/tracks/xxxxxxxx) --><a href="http://api.soundcloud.com/tracks/93549370" data-poptrox="soundcloud"><img src="http://placehold.it/100/FF5500/fff.png&amp;text=soundcloud" alt="" title="A Soundcloud Track"/></a>
  </section>
  <section>
    <!-- IFRAME: Link straight to whatever page you want to open --><a href="#" data-poptrox="iframe,600x400"><img src="http://placehold.it/100/07f/fff.png&amp;text=iframe" alt="" title="An IFRAME"/></a>
    <!-- AJAX: Link to whatever content you want to pull in (must be on the same domain)  --><a href="#" data-poptrox="ajax,600x400"><img src="http://placehold.it/100/07f/fff.png&amp;text=ajax" alt="" title="AJAX content"/></a>
    <!-- Ignore: Use this if you want a particular thumbnail to just link out to something --><a href="http://www.jqueryscript.net" data-poptrox="ignore"><img src="http://placehold.it/100/07f/fff.png&amp;text=ignore" alt=""/></a>
  </section>
</div><a class="devmount" href="http://devmount.de" target="_blank">created by<span>devmount</span></a>

<强>更新

现在让我了解你的需要，让我帮你一把。

Poptrox使用他自己的方法。如您所见，您不仅可以用来显示图像。但是定制需要遵循'Poptrox规则'。当您使用gallery选项时，您会看到它从href标记中获取图像，因此可用性不太适合自定义。

首先，我建议您在这里查看https://www.w3schools.com/howto/howto_css_modals.asp以了解模态对话框的工作原理。它会让你更好地理解。现在，关于Poptrox。如果你去Poptrox文档：https://github.com/ajlkn/jquery.poptrox

您可以选择自定义模态对话框的选项

  

的IFRAME 

Link format: Anything.
Type: iframe
Example:

<a href="path/to/whatever.html" data-poptrox="iframe,600x400"><img src="path/to/thumbnail.jpg" /></a>
     

AJAX内容

Link format: Anything (as long as it's on the same domain)
Type: ajax
Example:

<a href="path/to/whatever.html" data-poptrox="ajax,600x400"><img src="path/to/thumbnail.jpg" /></a>

iframe打开'iframe'。 AJAX基本相同，但Ajax是异步的。 Asyncronous意味着它向服务器请求但他没有等待响应继续执行。

知道了。您可以使用按钮配置输出HTML文件，使用HTML链接。并在你的模态中显示它，我认为最好的方法是使用ajax选项。

检查example我已经完成了，对不起我的英语我不是母语为英语的人。

答案 1 :(得分：0)

您还可以添加 href 代替标题中的简单文本 将您的代码更改为：

<!-- image 1-->
<a href="http://placehold.it/500/09f/fff.png"><img src="http://placehold.it/100/09f/fff.png&amp;text=image1" alt="" title="<a href='https://freefrontend.com/'>Just an image (#1)</a> /></a>

仅当进行以下更改时，这才充当链接.....

直到现在，您将遇到文件“ jquery.poptrox.min.js”，在该文件中找到“ captionText：r.attr（'title'）”，并将其更改为“ captionText：$ .parseHTML （r.attr（'title'）），“。现在jQuery会将title属性的内容解析为href而不是纯文本。

相关问题
最新问题