使用jQuery的動態對話框

Question

我在窗體上的每個單選按鈕旁邊都有一個圖像。單選按鈕的數量和內容從數據庫中獲取。我試圖在這些圖片上創建一個點擊事件，它提供了有關各自選項的快速介紹。

$('#icon').click(function() { 
    $('#dynamicid').dialog(); 
    return false; 
}); 

我知道如何在點擊時創建對話框，但不知道如何使用php從數據庫中獲取其ID和內容的div。我怎樣才能做到這一點？

P.S：我是新來的jQuery。

Answer 1

很多這取決於周圍的因素。就像對話div的來源一樣。

讓我們承擔，不管其他標記的，你必須要點擊你的形象了一會兒，你的對話框div位於標記中的下一個兄弟：

<div id="wrapper"> 
    <input type="radio"> <!-- simplified; I didn't look up the actual markup syntax --> 
    <img src="foo" class="clicky"/> 
    <div class="dialog">This is the related dialog</div> 

    <input type="radio"> <!-- simplified; I didn't look up the actual markup syntax --> 
    <img src="bar" class="clicky"/> 
    <div class="dialog">This is related to the previous image</div> 
</div> 
<div id="myDialog"></div> <!-- a container that can be reused; put it right before the body tag closes --> 

你隱藏對話框的div因爲你不「T需要它們可見，直到點擊：

.dialog, #myDialog { display: none; } 

然後你委託或以其他方式綁定一個點擊這種類型的圖片。我喜歡代表：

$('#wrapper').delegate('img.clicky', 'click', function() { 
    var theContent = $(this).next().html(); 
    $('#myDialog').html(theContent).dialog(); 
}); 

就這麼簡單。包裝正在監聽點擊（這可以是包含可點擊圖像的任何祖先），在圖像上聽到點擊（這是「this」）。我們使用jQuery遍歷下一個兄弟（對話框div），將其內容添加到我們的容器div中，並調用它的dialog（）。

更新小提琴：http://jsfiddle.net/txugb/3/

（請注意，雖然jQuery用戶界面包括，其CSS不是;該對話框不會看的權利，但它會出現。）

[更新：] 響應以我提出的方式來解決可能的佈局問題，我修改了函數以重用單個對話框容器。

海報評論說最初的建議可能一直存在缺陷後，它發生在我身上。當jQuery UI隱藏對話框時，我相信它將它附加到body標籤。