1

「#modal」のIDを持つリンクのモーダルダイアログにdiv ID「コンテンツ」をロードする次の関数があります。

編集

ID が一意でなければならないことは理解していますが、この例では、この関数を実際に使用するページで #modal の繰り返しはありません。#modal の代わりに .modal を指定して、#modal をクラスにしました。結果は同じです

編集終了

// Load external content in modal
$(document).ready(function(){       
    $('#modal').on('click', function(event){
        var $link = $(this);
        var $dialog = $('<div></div>')
            .load($link.attr('href') + ' #content')
            .dialog({
                autoOpen: false,
                modal: true,
                resizable: false,
                draggable: false,
                overflow: scroll,
                title: $link.attr('title'),
                width: $link.attr('width')
            });

        $link.click(function(){
            $dialog.dialog('open');
            return false;
        });
    });
});

ただし、外部ページをモーダル ダイアログにロードするのではなく、クリック イベントがリンクに移動するだけです。必要なすべての jQuery および jQuery UI ライブラリが含まれており、Google jQuery リポジトリからリンクされています。私が読んだことと例から、これはうまくいくはずです。

私も使ってみました

$('#modal').bind('click', function(){

と

$('#modal').click(function(){

前もって感謝します

4

3 に答える 3

4

デフォルトのアンカー動作を妨げていないため、リンクに移動します。event.preventDefaultを使用する

$('#modal').on('click', function(event){ // <-- modal is a link with a `href`
        event.preventDefault(); // <--
        var $link = $(this);
        var $dialog = $('<div></div>')
            .load($link.attr('href') + ' #content')
            .dialog({

href プロパティを持つアンカーは、クリックすると、href 内で提供されるリンクに移動します。そのデフォルト アクションを防止しない場合は、そこに移動します。

于 2012-10-19T20:41:25.467 に答える
1

試す：

$('#modal').on('click', function(event){
event.preventDefault();

これが失敗した場合は、これを参照してみてください。

WordpressページのJQueryUIダイアログで外部URLを開く

于 2012-10-19T20:45:37.353 に答える
1

click一番下に配線しているイベントがどうなっているのか、100% わかりません。要素のよう#modalに聞こえますが。aリンクのデフォルトの動作が原因である可能性が最も高いため、event.preventDefault();. の最初の行に追加しました.on。

#modalさて、リンクに接続しているので、2 回目のクリック イベントが何をするのかわかりません。

// Load external content in modal
$(document).ready(function(){       
    $('#modal').on('click', function(event){
        event.preventDefault();
        var $link = $(this);
        var $dialog = $('<div></div>')
            .load($link.attr('href') + ' #content')
            .dialog({
                autoOpen: false,
                modal: true,
                resizable: false,
                draggable: false,
                overflow: scroll,
                title: $link.attr('title'),
                width: $link.attr('width')
            });

        $link.click(function(){
            $dialog.dialog('open');
            return false;
        });
    });
});

#modalモーダル HTML がロードされた後、それを開きますか?それとも、ユーザーがもう一度クリックしてダイアログを開くのを待っていますか?

于 2012-10-19T20:42:40.600 に答える