設置對話框覆蓋Jquery

我想設置一個jQuery對話框的覆蓋圖像，並且似乎無法管理任務。設置對話框覆蓋Jquery

我有其他的頁面上的對話框，我想沒有背景圖像，所以設置疊加背景的CSS不會作爲一攬子解決方案。

我已經嘗試了很多不同的方法，並且我認爲應用jQuery命令設置疊加層使用css和實際對話框div和css被添加到DOM中存在計時問題。

這是我到目前爲止嘗試過的。

$('#submitUpload').click(function(){ 
    $("#uploadStart").dialog('open'); 
    $(".ui-widget-overlay").css({'background-image': 'url("http://www.mydomain.com/images/ftp-page-bg.gif")','opacity':'1'}) 
    $("#uploadForm").submit(); 
});

$("#uploadStart").dialog({  
    autoOpen: false, 
    width: 400, 
    modal: true, 
    closeOnEscape: false, 
    draggable: false, 
    resizable: false,   
    open: function(event, ui) { 
     $(".ui-dialog-titlebar-close").hide(); 
     $(".ui-widget-overlay").css({'background-image': 'url("http://www.mydomain.com/images/ftp-page-bg.gif")','opacity':'1'}) 
    } 
});

我還使用上沒有成功的對話框代碼dialogClass方法嘗試。

使用絕對網址和相對值，以及使用引號或無引號的網址。

圖像存在於目錄中。

任何人有任何想法如何讓jQuery適用於正確的時間顯示圖像作爲覆蓋？

謝謝！

更新

對話框類指定將允許您設置類的全部測試對話框。我實際上只是想挖掘特定的ui-widget-overlay類並在那裏覆蓋背景圖像。我發現試圖使用dialogClass覆蓋背景工作覆蓋對話框的背景，而不是覆蓋背景。

當對話框被添加到DOM時，jQuery在body標籤前加載它的div。

我找到了解決辦法，是在該對話框打開的方法，我用

$(".ui-widget-overlay").addClass('artFTP');

添加類

.artFTP{background-image: url(../../images/ftp-page-bg.gif); opacity:1;}

，並確保它是最後一個類文件中那會覆蓋疊加的背景圖像。

我希望這可以幫助別人。

感謝和jjross +1，你的回答讓我跳回到jQuery文檔。

如果有人有更好的解決方案，請發佈。我很樂意看到它。我認爲可能有一種使用CSS來完成任務的方式，但是（對我來說）無法解決這個問題。

來源

2011-01-10 Kris.Mitchell

在調用jquery之前，您應該能夠將該類添加到HTML代碼中的div中。在我的測試中，它在創建對話框時自動將該類添加到對話框中。

在新班級中，您應該可以指定背景圖片。

例如：

電話：

$("#dialog").dialog();

上

<div id="dialog" class="thisClass" title="Edit Case Status"> 
    <div>some stuff</div> 
</div>

導致與「thisClass」類創建對話框。

作爲替代選項，它看起來像對話框有一個「dialogClass」方法。它會讓你將自己的類添加到對話框中（在該類中，你可以定義背景）。從文檔：

指定的類名將被添加到對話框中，以進行其他主題。代碼示例

使用指定的dialogClass選項初始化對話框。

$(".selector").dialog({ dialogClass: 'alert' });

在init之後獲取或設置dialogClass選項。

//getter 
var dialogClass = $(".selector").dialog("option", "dialogClass"); 
//setter 
$(".selector").dialog("option", "dialogClass", 'alert');

來源

2011-01-11 18:03:20 jjross

感謝偉大的解釋，可能的答案，但沒有上述工作。我找到了解決方案並更新了問題。謝謝！ – 2011-01-12 13:22:04

我遇到了同樣的問題，發現在這種情況下你的問題。我沒有找到可以滿足我的任何解決方案，所以我自己做了一些事情。

首先，讓我介紹一下我的問題。

我有一個頁面，我在那裏有兩種對話框。帶有消息的視頻和對話框（如警報，確認，錯誤等）。正如我們所知，我們可以爲對話設置不同的類別，但我們無法爲不同的疊加層設置類別。所以問題是，如何爲不同的疊加層設置不同的行爲？

因此，我深入挖掘，比莫里亞的矮人深入jQuery UI代碼本身。我發現，實際上每個對話框都有一個獨特的疊加層。它創建在「私人」函數_createOverlay其中不是可訪問。實際上，我通過jquery ui namespace找到了函數$.ui.dialog.prototype._createOverlay。所以，我能夠做一個小的擴展與邏輯基於類：

(function() { 
    // memorize old function 
    var originFn = $.ui.dialog.prototype._createOverlay; 

    // make new function 
    $.ui.dialog.prototype._createOverlay = function() { 
     originFn.call(this); // call old one 

     // write your own extension code there 
     if (this.options["dialogClass"] === "video-dialog") { 
      var overlay = this.overlay; // memorize overlay (it is in old function call as this.overlay) 

      var that = this; // just cause bind is event 

      // my own extenstion, when you click anywhere on overlay, dialog is closed + I change css 
      overlay.bind('click', function() { 
       that.close(); // it is same like element.dialog('close'); 
      }).css({ 
       "background": "none", 
       "background-image": "url(\'files/main-page/profile1.png\')" // this didnt work for you, but works for me... maybe I have newer version of jQuery.UI 
// anyway, once you have overlay as variable, Im sure you will be able to change its css 
      }); 
     } 
    }; 
})();

我希望這會幫助別人:)

來源

2014-03-10 14:37:04

設置對話框覆蓋Jquery

回答

相關問題