2012-01-06 61 views
1

代碼片段使用jQueryUI dialog是:保持jQueryUI的對話框的內容可見,添加新的層面的對話框內容

$(".upload_photos").bind('click', function (e) { 
    e.preventDefault(); 
    var dialog = $(this); 
    dialog.dialog({ 
     width:860, 
     height:560, 
     autoOpen: false 
    }); 
    dialog.dialog('open'); 
}); 

HTML標記:

<div class="upload_photos"> 
    <img src="source" /> 
</div> 

當我點擊 'upload_photos' DIV ,圖像顯示在對話窗口中,但從背景頁面消失。

  1. 如何讓它在同一時間在背景頁面中可見?

  2. 當圖像出現在對話框中時,我想以不同的尺寸(寬度和高度)出現它。怎麼做?

編輯:

點擊 'upload_photos' DIV多次上創建多個對話。但是我想爲以後的點擊創建沒有對話框。怎麼做?

EDIT2:

我有 「upload_photos」 div的圖像下方的按鈕。我利用克隆(var dialog = $(this).clone();)。我也得到那個對話框中的那個按鈕。但是,如果我點擊按鈕,網頁上的圖像開始標記,而不是在對話框的圖像上。

解決方案是什麼?

EDIT3:

使用jQuery的幫助下標記腳本使得在 'upload_photos' DIV選擇。當它被克隆到對話框時,腳本仍然在網頁中找到選擇,而不是在對話框中。這可能與事件處理有關(?)或什麼?我試過

var dialog = $(this).clone(true); 

但無法解決。如何將注意力轉移到對話窗口?

EDIT4"

如果我使用var dialog = $(this)代替var dialog = $(this).clone(true);則標記發生在該對話框的地方,但是從網頁中的圖像消失。

+0

提供更多的核心,以幫助您與編輯2.你的HTML和按鈕的JavaScript將是巨大的。 – falsarella 2012-01-06 14:05:49

+0

我們可以聊天嗎?可能明天plz?如果你能好好做,那麼在哪個時間?我來自南亞,孟加拉國 – 2012-01-06 14:07:50

+0

嘗試創建覆蓋div而不是克隆,或者嘗試自己一步一步學習,或者提供更多的代碼(但它會變得太侷限的問題)。 – falsarella 2012-01-09 11:13:09

回答

0

1)您使用的頁面DIV的對話框,試試這個:

var dialog = $(this).clone(); 

2)的img固定尺寸的對話框:

$("img", dialog).addClass('fixedSize'); 

img.fixedSize { 
    width: 500px; 
    height: 500px; 
} 

3)從點擊阻止背景:

dialog.dialog({ 
    width:860, 
    height:560, 
    autoOpen: false, 
    modal: true 
}); 

讀d ialog文檔和更多信息和配置選項:

+0

我有固定的對話框的寬度和高度(860,560)。我想要圖像(它最初的尺寸(假設爲200,100))具有固定尺寸,即500,500。怎麼做? – 2012-01-06 11:46:42

+0

@IstiaqueAhmed見我編輯的答案 – falsarella 2012-01-06 12:05:49

+0

我應該在那裏添加? – 2012-01-06 12:48:19

相關問題