1

语言：PHP 和 jQuery

我想要做的是当用户点击它时弹出一个动态链接。
我不希望该页面在新窗口中打开，而是在一个覆盖在当前页面上的模态窗口中打开。

因此，对于 javascript，当用户单击此链接时，操作是找到链接的属性href并为该链接制作代码，使其位于模态窗口内的 iframe 内。

带有动态 PHP 链接 的HTML ：

 <a href="http://www.facebook.com/share.php?u=<?php echo $root_url; ?>?id=<?php echo $rows['id']; ?>&title=<?php echo urlencode($rows['keyword']); ?>" style="border: none;" onclick="return false;" class="fblink" target="iframe"><img src="./img/Facebook.png" style="float: right; margin-top: 0px;" title="Share on Facebook" alt="Share on Facebook" id="<?php echo $rows['id']; ?>"></a>

jQuery脚本 ：

    var makePop = function() {
    link = $(this).attr('href');
    return '<div class="the_box" id="box" style="display: block;"><a class="boxclose" id="boxclose"></a>
    <iframe src="' + link + '" height="500px" width="600px" id="" name="iframe"></iframe></div>';
    } // End of Function.

    $("a.fblink").click(makePop);

我不知道如何做到这一点......这不起作用。
有人吗？:o)

4

2 回答 2

2

从事件处理函数返回字符串是没有意义的，它不会做任何事情。

您需要实际创建模态窗口。为此尝试使用jQuery UI。

于 2012-06-09T13:22:53.147 回答
1

以下应该提供您正在寻找的内容。但是需要考虑 XHR 'load' 调用的同源策略等问题。

请参阅以下示例： http: //jsfiddle.net/qeXea/2/
注意：由于相同的来源政策，iframe 无法填充内容，只需在您的网站上设置您自己的页面并使用您自己的 url 来查看.

HTML

<a href="http://www.yoururl.com" onclick="launchUrl(this); return false;">Click Here</a>
<div id="fade"></div>
<iframe id="dialog" src=""></iframe>
<script type="text/javascript">
function launchUrl(owner) {
    $('#fade').show();
    var link = $(owner).attr('href');
    $('#dialog').load(link, function(response) {
        $('#dialog').show();
    });
}
</script>

CSS

#fade {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    display: none;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5);
}

#dialog {
    top: 100px;
    left: 100px;
    width: 200px;
    height: 200px;
    z-index: 101;
    display: none;
    position: absolute;
}

选择

HTML

<a href="" onclick="launchUrl('http://www.yoururl.com'); return false;">Click Here</a>
<div id="fade"></div>
<iframe id="dialog" src=""></iframe>
<script type="text/javascript">
    function launchUrl(link) {
        $('#fade').show();
        $('#dialog').load(link, function(response) {
            $('#dialog').show();
        });
    }
</script>
于 2012-06-09T14:17:58.400 回答