Question

我正在使用我从这里获得的Simplemodal插件：http://www.ericmmartin.com/projects/simplemodal-demos/

我成功将其中一个链接放在此页面上：http://tonangi.com/portfolio_test.html（点击查看幻灯片显示链接）。我正在加载一个iframe。我想在同一页面上再做2次但我无法弄清楚如何......

我只是想根据链接加载新内容 - 所以你看到3家公司，只要有人点击相应的链接，我就可以加载新内容。

有人能帮助我吗？

Answer 1

我一直这样做，并且我们总是为每个要触发的模态设置不同的模态div。

我们将所有模态放在一个名为offscreen的类中，它隐藏在标记的末尾，然后相应地触发它们。

如果你想要更多动态功能，那么你将不得不使用某种AJAX调用从服务器端脚本中检索模态。

Answer 2

好的，所以有多种方法可以实现这一点，我会告诉你几个。

    <br><br>
    <a href="#" id="link2">Verizon Support</a>
    <div class="link2" style="display:none"><iframe src="http://www.verizon.com/support" frameborder="0" height="700" scrolling="no" width="800"></iframe></div>

    <br><br>
    <a href="#" id="link3">Google ME</a>
    <div class="link3" style="display:none"><iframe src="http://www.google.com/" frameborder="0" height="600" scrolling="no" width="800"></iframe></div>

    <br><br>
    <a href="#" id="link4">I Load HTML</a>

    <br><br>
    <a href="#" class="link5">I load same as </a> &nbsp; &nbsp; &nbsp;
    <a href="#" class="link5">what i load which is</a> &nbsp; &nbsp; &nbsp;    
    <a href="#" class="link5">same thing again as me! </a>  


<script type="text/javascript">
    $(document).ready(function() {

        $('#link2').click(function(){ $('.link2').modal(); }); //When you click on object with ID "link2", content from object with Class "link2" will be loaded into modal.

        $('#link3').click(function(){ $('.link3').modal(); }); //When you click on object with ID "link3", content from object with Class "link3" will be loaded into modal.

        $('#link4').click(function(){ $.modal('<iframe src="http://www.firefox.com/" frameborder="0" height="600" scrolling="no" width="800"></iframe>'); }); //When you click on object with ID "link4", pre-specified HTML content in the "modal" function will be loaded into modal.

        $('.link5').click(function(){ $.modal('<iframe src="http://www.woot.com/" frameborder="0" height="600" scrolling="no" width="800"></iframe>'); }); //When you click on any object with Class "link5", woot page will be loaded.

    });
</script>

您可以简单地将此代码块放在您当前拥有模态链接的页面中并查看其是否有效。

阅读jQuery部分的评论，了解发生了什么。请记住，ID必须是唯一的，这意味着整个页面上的所有对象ID必须是唯一的，才能使JS正常工作。如果需要具有相同行为的多个实例，请使用CLASS。如上例所示为“Class5”链接。

希望这足以做你想做的事情。

每次触发具有不同内容的Simplemodal

2 个答案: