poptrox添加可點擊的鏈接/按鈕

Question

我正在使用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) 
     }); 

    }); 

}）;

Answer 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>

---

UPDATE

讓我給你一個手你的目的，現在我明白你需要什麼。

Poptrox使用他自己的方法。如你所見，你不僅可以用來顯示圖像。但是定製需要遵循'Poptrox規則'。當您使用圖庫選項時，您會發現它會從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> 

I幀開一個'iframe'。 AJAX基本上是相同的，但Ajax做它asyncronous。異步意味着它向服務器請求，但他不等待響應繼續執行。

知道了。您可以使用按鈕配置輸出HTML文件，使用HTML鏈接。並將其展示在您的模式中，我認爲最好的方法是使用ajax選項。

檢查此example我已經完成並抱歉我的英語我不是母語英語的人。