Настройка диалога наложения Jquery

Question

Я хочу установить наложение диалогового окна 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 в коде диалога безуспешно.

Как с абсолютным URL, так и с относительным,и URL в кавычках или без кавычек.

Изображение существует в каталоге.

У любого есть какие-либо идеи о том, как заставить JQuery применять с правильным временем для отображения изображения в видеоверлей?

Спасибо!

Обновление

Обозначение класса диалога позволит вам установить классы для общего диалога.Я на самом деле хотел просто подключиться к определенному классу ui-widget-overlay и перевернуть фоновое изображение там.Я обнаружил, что попытка переопределить фон с помощью dialogClass сработала для переопределения фона диалога, а не фона наложения.

Когда диалог добавляется в DOM, jQuery загружает его div прямо перед тегом body.

Я нашел решение, заключающееся в том, что в методе open для диалога я использовал

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

, чтобы добавить класс

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

, и убедился, что этопоследний класс в файле, который перезаписывает наложенное фоновое изображение.

Надеюсь, это кому-нибудь поможет.

Спасибо и +1 к jjross, ваш ответ заставил меня вернуться в документы jQuery.

Если у кого-то есть лучшее решение , пожалуйста, напишите.Я был бы счастлив увидеть это.Я думаю, что мог бы быть способ использовать CSS для выполнения этой задачи, но (на всю жизнь) не мог понять это.

Answer 1

Я столкнулся с той же проблемой и нашел в этом случае ваш вопрос. Я не нашел решения, которое могло бы меня удовлетворить, поэтому я сделал что-то сам.

Сначала позвольте мне представить мою проблему.

У меня есть страница, где у меня есть два вида диалогов . Диалоги с видео и диалоги с сообщением (например, предупреждение, подтверждение, ошибка и т. Д.). Как мы знаем, мы можем установить другой класс для диалога, но мы не можем установить класс для другого наложения. Итак, вопрос заключался в том, как установить другое поведение для разных оверлеев?

Так что я копаю, я копаю глубже, чем Гномы в Мории, в сам код пользовательского интерфейса jQuery. Я обнаружил, что на самом деле для каждого диалога существует уникальное наложение. И он создается в «закрытой» функции _createOverlay, которая недоступна . Фактически, я нашел функцию через пространство имен jquery ui как $.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
            });
        }
    };
})();

Надеюсь, это поможет другим :)

Answer 2

Вы должны иметь возможность добавить класс в div в своем HTML-коде до вызова jquery.В моем тестировании это автоматически добавляло этот класс в диалог при его создании.

В новом классе вы сможете указать фоновое изображение.

Например:

вызов:

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

on

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

вызывает создание диалога с классом thisClass.

как альтернативный вариант, похоже, что у диалога есть метод "dialogClass".Это позволит вам добавить свой собственный класс в диалог (в этом классе вы можете определить фон).Из документов:

Указанные имена классов будут добавлены в диалог для дополнительных тем.Примеры кода

Инициализировать диалог с указанным параметром dialogClass.

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

Получить или установить параметр dialogClass после init.

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