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 の「ロード」呼び出しの同一生成元ポリシーなどの問題を考慮する必要があります。

次の例を参照してください: http://jsfiddle.net/qeXea/2/
注:同じオリジン ポリシーにより、iframe にコンテンツを取り込むことができません。Web サイトに独自のページを設定し、独自の 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 に答える