Question

我使用Wordpress，我希望有一个插件，允许我为＆＃34; a href＆＃34;打开一个盒子/弹出窗口内容。呼叫。像这样的东西： <a href="onclik open popup">Text</a>在div标签中使用它

这是我使用的代码：

<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＆＃34; Tracklist＆＃34;按键所以无论谁点击Tracklist，我都希望打开一个带有内容的方框弹出窗口。

会有更多＆＃34;跟踪列表＆＃34;按钮，所以我不需要只是一个全局弹出框。我尝试使用Anything弹出窗口，但是它不起作用，因为它使用了一个短代码，如：[anythingpupup = id1]，它不能用于＆＃34; a href＆＃34;调用

Answer 1

这里的第一个问题是您缺少结束锚标记

其次，您应该给出您想要打开“id”属性的框。

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

无论您在何处放置锚标记，都可以使用

引用该框

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

“＃”将引用匹配元素的id属性。

无需安装整个Wordpress插件。您可以使用Bootstrap Modals

之类的内容

说明非常简单，可以帮助您进行设置。

Answer 2

我认为你不需要插件。您可以使用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。

干杯！

Answer 3

根据您想要获得的结果，有多种方法可以实现这一目标。

也许最简单的方法就是不使用插件;只需添加一个隐藏的div，其中包含弹出窗口的内容。然后，从jQuery中，捕获标记a的点击并显示隐藏的div。从CSS你可以以任何你需要的方式设置div。

如果您想使用插件，可以使用Fancybox或任何其他类似插件，因为您的网站上已有jQuery。

href调用的内容弹出框

3 个答案: