Блокирование фонового содержимого и фокус на модальном диалоговом окне

Я пытаюсь заблокировать фон с помощью двух двух модальных диалоговых окон jquery, пока пользователь не закроет окно. Любая идея о том, как достичь этого?

Под "блокировкой фона" я имею в виду отключить другие элементы на странице (т.е. сделать другие элементы незаметными).

Вот мой код ниже:

            // sign up dialog
        $( "#aboutus_dialog" ).dialog({
            autoOpen: false,
            show: "fadein",
            hide: "fadeout"
        });

        // sign up dialog
        $( "#signup_dialog" ).dialog({
            autoOpen: false,
            show: "fadein",
            hide: "fadeout"
        });     

        // about us modal
        $('#aboutus').click(function() { 
            modal: true,
            $("#aboutus_dialog").dialog("open");
            return false;
        });

        // about us modal
        $('#signup').click(function() { 
            $("#signup_dialog").dialog("open");
            return false;
        });
    });

Ответ 1

Это то, что вы ищете

http://jqueryui.com/demos/dialog/#modal

Он блокирует фон, у которого есть кнопка источника просмотра. У вас есть оверлей вообще?

Попробуйте настроить его вручную (не рекомендуется, а скорее css):

$(".ui-widget-overlay").attr('style','background-color: #000; opacity:1; z-index:1000;');

И, конечно же, для параметра модального варианта значение true.

Если цвет слишком сильный, уменьшите непрозрачность соответственно.

Ответ 2

когда я изменил модальное значение на "true" (в angular js), все фоновые элементы были отключены. В моем коде есть код:

    var options = {
                    autoOpen : false,
                    modal : true,
                    close : function(event, ui) {
                        console.log("Predefined close");
                    }
                 };

    dialogService.open("myDialog" + k, "dialogTemplateload.html", model, options)
    .then(
            function(result) {
                console.log("Close");
                console.log(result);
            },
            function(error) {
                console.log("Cancelled");
            }
        );

Ответ 3

Просмотрите параметры диалога в API, их довольно много. В дополнение к modal, который устанавливает наложение на страницу, которая блокирует события мыши, существует также closeOnEscape, который, если установлен на false, не позволяет пользователю удалять клавишу эвакуации на клавиатуре, чтобы закрыть диалог и, следовательно, должен взаимодействовать с диалоговое управление напрямую

В вкладках на демонстрационной странице есть значительный API, заправленный http://jqueryui.com/demos/dialog/

Ответ 4

Попробуйте создать свою собственную тему с помощью ролика JQuery. Это также помогает в функциональности модальных и других виджетов в библиотеке пользовательского интерфейса JQuery

http://jqueryui.com/themeroller/