自定義CSS範圍和jQuery UI對話框主題

Question

我在單個頁面上使用多個jQuery UI對話框主題，並且我有錯誤。

[1.3.2的jQuery] [jQuery用戶界面1.7.2]

下面是一個屏幕截圖（VS 定製CSS範圍）：

單獨第1頁）

VS天然2）

我該如何解決這個問題？

Answer 1

今天我遇到了同樣的問題。看起來您創建的任何對話框都會從當前層次結構中取出，並放置在主體元素的末尾，這意味着它不包含在自定義範圍內。

「dialogClass」選項也沒有幫助，因爲它設置了對話框元素的類，但是您需要使用該對話框作爲自定義類的元素的後代。

使其工作的一種方法是在body標籤上設置自定義類。但是，這意味着整個文檔都會受到影響，並且不能在一個頁面上使用不同的主題。

我最終的解決方法是使用自定義作用域將對話元素放回到元素中。假設有一個包含「myCustomScope」類的div，其中包含自定義主題應用的所有內容;與ID爲「myDialogContent」的DIV應該成爲對話：

// Create the dialog, but don't open it yet 
var d = $('#myDialogContents').dialog({ 
    autoOpen: false 
    // Other dialog options 
}); 
// Take the whole dialog and put it back into the custom scope. 
d.parent('.ui-dialog').appendTo('.myCustomScope'); 
// Open the dialog (if you want autoOpen). 
d.dialog('open'); 

Answer 2

//Try this to fix problem 
//note: jquery-ui-1.7.2 

var dwrap = [false, false]; 
//0 - dialog1 flag(modal: true) 
//1 - dialog2 flag(modal: false) 

//?dialog1 = your dialog id 
// example: mytest-dialog1 
//?dialog2 = your dialog id 
// example: mytest-dialog2 

//?custom css scope = your custom css scope 
// example: .my-dialog-themes 

function DialogTheme(dialog){ 
    switch (dialog){ 
    case 0 : 
     if(!dwrap[0]){ 
     $("div[aria-labelledby*='ui-dialog-title-?dialog1']").wrap("<div class='?custom css scope'></div>"); 
     dwrap[0] = true; 
     } 
     //for overlay no good way but i dont see another 
    $(".ui-widget-overlay").wrap("<div class='?custom css scope'></div>"); 
    break; 
    case 1 : 
     if(!dwrap[1]){ 
     $("div[aria-labelledby*='ui-dialog-title-?dialog2']").wrap("<div class='?custom css scope'></div>"); 
     dwrap[1] = true; 
     } 
    break; 
    default : 
    break; 
    } 
} 

//Use: 
//after open dialog call DialogTheme(0) for modal and DialogTheme(1) for none modal 
//example: 

$("#?dialog1").dialog('open'); 
DialogTheme(0); 

//This way work correct on the page except overlay, 
//note you must have jquery-ui-1.7.2 other versions not tested 
//It's all 

三江源安德烈亞斯你的答案

Answer 3

有跡象表明，得到取出正常的HTML流的其他的jQuery UI元素，除了對話框。例如，自動完成小部件。

我發現，這些方針的東西，似乎這樣的伎倆：

$(window).load(function() { 
$('.ui-autocomplete').wrap('<div class="css_scope_selector" />'); 
}); 

雖然window.load這樣做可能不是很理想。

Answer 4

Andrea的回答讓我對覆蓋層工作的iframe和模態有了一個瞭解。打開後必須設置寬度和高度，並將覆蓋圖添加到作用域div。

var d = $("<iframe src=\"" + src + "\" id=\"upload_iframe\" />") 
.dialog(
{ 
    title: "Import", 
    autoOpen: false, 
    width: 1000, 
    height: 600, 
    modal: true, 
    resizable: false, 
    draggable: false 
}); 

var scope = $("<div>").addClass("jquery-ui-scope").appendTo("body"); 

d.parent(".ui-dialog").appendTo(scope); 
d.dialog("open").width(990).height(590); 
$(".ui-widget-overlay").appendTo(scope); 

Answer 5

對話框小部件通過設計附加到主體。如果您覺得不自然，將它移到DOM中的其他位置是jQuery UI開發團隊無法預料的，​​那麼一種解決方案可能就是將您的作用域應用於對話框，方法與將其應用於使用它的其他元素的方式相同，通過簡單地用你的主題範圍爲類包裝它在一個div標籤：

$("#mydialog").dialog().parent(".ui-dialog").wrap("<div class='custom-theme-css-scope'></div>"); 

Answer 6

你應該對話框的創建後 1）總結的.ui-dialog元素。 2）打開對話框後包裝.ui-widget-overlay元素。 由於每次打開/關閉對話框時，都會創建/銷燬.ui-widget-overlay元素，因此您還應該使用 3）在關閉對話框時移除.ui-widget-overlay的空包裝（否則您將獲得許多空包裝）。

$(function() { 
$("#dialog").dialog({ 
    position: "center", 
    autoOpen: false, 
    modal: true, 
    create: function(event, ui){ 
     $('.ui-dialog').wrap('<div class="your-class" />'); 
    }, 
    open: function(event, ui){ 
     $('.ui-widget-overlay').wrap('<div class="your-class" />'); 
    }, 
    close: function(event, ui){ 
     $(".your-class").filter(function(){ 
      if ($(this).text() == "") 
      { 
       return true; 
      } 
      return false; 
     }).remove(); 
     } 
    }); 
}); 

在JQuery UI 1.8.13中測試。