如何使jQuery對話框使用超鏈接文本而不是按鈕？

我做了它的工作，但問題是，它只能使用一次。彈出窗口出現後，鏈接不起作用，彈出窗口不再顯示。我必須刷新才能看到正在發生的事情。我得到了這個http://jsfiddle.net/pjVcR/2/，它在jsfiddle裏面工作，但是在我的網站裏它不起作用。我的網站鏈接是在這裏：MY SITE 如何使jQuery對話框使用超鏈接文本而不是按鈕？

下面是代碼：

<div class="content"> 
    <h4><a href="#" >AAAA</a></h4><img src="AAAA.jpg" /> 
    <div class="dialog" title="AAAA" >text AAAA 
    </div> 
    </div> 

    <div class="content"> 
    <h4><a href="#" >BBBB</a><br></h4><br><img src="BBBB.jpg" /> 
    <div class="dialog" title="BBBB" >text 
    </div> 
    </div>

，並在HTML中給出的腳本，以及：

<script> 
$("a").click(function(event) { 
    $(this).parent().parent().children(".dialog").dialog({ 
    close: function(event, ui) { 
     $('.dialog').dialog('destroy'); 
    } 
    }); 
}); 
</script>

來源

2013-10-14 Apolo Radomer

首先，確保您沒有多個具有相同ID的控件。在你的例子中，你有兩個鏈接，我'OpenDialog'。另外，你的網站對我來說工作得很好......你能解釋一下，如果你得到錯誤嗎？怎麼了？應該發生什麼？你測試過哪些瀏覽器？ –

@NikitaSilverstruk我在Chrome中測試它。 id =「OpenDialog」是無用的。 –

@NikitaSilverstruk當你點擊來打開對話框，然後關閉它，你能再次打開它嗎？它不適合我。 – eyetea

你必須與dialog班裏很多元素，所以當你打電話

$('.dialog').dialog('destroy');

你正在破壞對話不存在，因此例外：

不能調用對話框的方法來初始化之前;試圖調用方法「破壞」

使用的$(this)本地實例的close處理程序（它是特定.dialog元），這樣的jQuery知道破壞哪一個裏面。

$("a").click(function(event) { 
    $(this).parent().parent().children(".dialog").dialog({ 
    close: function(event, ui) { 
     $(this).dialog('destroy'); 
    } 
    }); 
});

http://jsfiddle.net/pjVcR/3/

注意，如果你改變使用的.dialog代替$(this)你仍然會得到你在你的頁面都得到相同的錯誤代碼，這就是爲什麼你沒有得到的錯誤jsFiddle，因爲你只有一個div，其中有.dialog。

來源

2013-10-14 19:27:54

它的工作。在你的jsfiddle中，你把OpenDialog和OpenDialog2。但是id =「OpenDialog」沒用。所以它可以在沒有它或沒有它的情況下工作，而不必將名稱更改爲OpenDialog2，OpenDialog3等。 –

@ApoloRadomer，啊是的，我只是在測試，但是沒關係。 –

現在人們經常運行ajax來將這樣的數據加載到模態框中。 –

您遇到的問題是，當你調用

$('.dialog').dialog('destroy');

要銷燬對象/它確實不再存在，你就需要重新創建它，而不是隻調用它..

嘗試創建一個類，你可以把你的href標記，這將使你你在找什麼

試着這樣做：

<a href="PageName.php" class="iframe_popup" title="Title You want The Dialog Box to show">Your Text Link here</a>

$(function() { 

$('.iframe_popup').click(function(e) { 
    e.preventDefault();   
    var $this = $(this); 
    var horizontalPadding = 30; 
    var verticalPadding = 30; 

    var iframe_popup = $('<iframe id="externalSite" class="externalSite" frameborder="0" allowtransparency="true" src="' + this.href + '" />'); 
    iframe_popup.dialog(
    { 
     title: ($this.attr('title')) ? $this.attr('title') : '', 
     autoOpen: true, 
     width: 600, 
     height: 450, 
     modal: true, 
     autoResize: true, 
     overlay: { 
      opacity: 0.5, 
      background: "black" 
     } 
    }).width(600 - horizontalPadding).height(450 - verticalPadding); 
}); 

}); // Close Function

來源

2013-10-14 19:17:53

它工作得很好，但還有另一個問題。每當我點擊超鏈接文本時，我想要一個新的文本出現在我的彈出框中。在您的代碼中，該框僅顯示與超鏈接的TEXT相同的文本。這是它： TEXT –

$('.dialog').dialog('destroy');想要摧毀你所有的對話，不僅是可見的。這就是爲什麼你會得到一個錯誤。

嘗試$('.dialog:visible').dialog('destroy');銷燬所有可見的對話框。或者你可以在對話框的前面添加id，然後選擇並銷燬它們。

來源

2013-10-14 19:39:56

我沒有工作不幸。 –

你得到了什麼錯誤？當我測試它時，在你的網站上工作得很好。 – 2013-10-14 20:04:14

如何使jQuery對話框使用超鏈接文本而不是按鈕？

回答

相關問題