由href調用的內容彈出框

我使用Wordpress，我希望有一個插件允許我爲「a href」調用打開一個box/popup內容。事情是這樣的： <a href="onclik open popup">Text</a>使用它在一個div標籤由href調用的內容彈出框

這是代碼我使用：

<div class="tracklist download-button2" style="display: initial-block"> 
    <a href="#"> 
     <span class="header-clip2"> 
      <span class="header-triangle2"></span> 
     </span> 
     <span class="header-bg2"></span> 
     <div class="clear"></div> 
     <div class="file-icon-inner2"> 
      <i class="icon-download2"></i>Tracklist 
     </div> 
    </div>

請http://af-sound.ro「曲目」按鈕所以誰就將點擊曲目，我想有一個箱子彈出與裏面的內容打開。

將會有更多的「曲目列表」按鈕，所以我不只是需要一個全球性的彈出框。我嘗試過任何彈出窗口，但不起作用，因爲它使用如下簡碼：[anythingpupup = id1]不能在「a href」呼叫中使用

來源

2015-04-17 Andrei Fechete

第一個問題是您缺少關閉錨點標籤

其次，你應該給你想打開「id」屬性的框。

<div id="popup-box"></div>

無論你把你的錨標記，然後你可以參考使用

<a href="#popup-box">Click to open popup</a>

的「＃」指的匹配元素的id屬性框。

沒有必要安裝整個Wordpress插件。您可以使用類似Bootstrap Modals

的說明是非常直截了當地幫助你設置它。

來源

2015-04-17 13:55:48

我認爲你不需要插件。你可以使用JavaScript來從錨點打開這樣的彈出窗口。下面是一個例子代碼：

<a href="#" onclick="Popup();"> Open Popup! </a>   
    <script language="javascript"> 
     function Popup() 
     { 
      var win = window.open('', '',"toolbar=no, width=100, height=20"); 
      var doc = win.document.open(); 
      doc.write('<html><body> <b>Hello!</b> </body></html>'); 
      doc.close(); 
     } 
    </script>

正如你所看到的，你可以添加任何動態HTML作爲彈出窗口的內容，包括您在doc.write方法所需的HTML。

乾杯！

來源

2015-04-17 15:55:39 Stamen

有很多方法可以實現這一點，具體取決於您想要得到的結果。

也許最簡單的方法是根本不使用插件;只需在其中添加一個帶有彈出窗口內容的隱藏div。然後，從jQuery中，捕獲您的標籤a的點擊並顯示該隱藏的div。從CSS你可以以任何你需要的方式設置div的樣式。

如果你想使用插件，你可以使用Fancybox或其他任何類似，鑑於你已經有jQuery的在您的網站。

來源

2015-04-17 17:13:33 zed

由href調用的內容彈出框

回答

相關問題