我正在使用 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)
});
});
});
最佳答案
您能否添加一些您的场景的代码，以便我们了解一些？
我了解您想使用 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&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&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&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&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&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&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&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&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&text=ignore" alt=""/></a>
</section>
</div><a class="devmount" href="http://devmount.de" target="_blank">created by<span>devmount</span></a>更新
既然我了解您的需求，请让我帮助您实现您的目标。
Poptrox 使用他自己的方法。正如您所看到的，您不仅可以用来显示图像。但定制需要遵循“Poptrox 规则”。您会发现，当您使用图库选项时，它会从 href 标记中获取图像，因此自定义的可能性不大。
首先我向您推荐的是这里 https://www.w3schools.com/howto/howto_css_modals.asp了解模式对话框如何工作的基础。它会给你一个更好的理解。现在，关于 Poptrox。如果你去 Poptrox 文档:https://github.com/ajlkn/jquery.poptrox
您可以选择自定义模式对话框
IFRAMEs
Link format: Anything. Type: iframe Example: <a href="path/to/whatever.html" data-poptrox="iframe,600x400"><img src="path/to/thumbnail.jpg" /></a>AJAX Content
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 是异步的。异步是指向服务器发出请求，但不等待响应就继续执行。
知道了。您可以使用 HTML 配置带有按钮、链接的输出 HTML 文件。并在你的模态中显示它，我认为最好是使用 ajax 选项来做到这一点。
检查这个example我已经完成了，对不起我的英语，我不是以英语为母语的人。
关于javascript - poptrox 添加可点击的链接/按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43438411/