Я пытаюсь заблокировать фон с помощью двух двух модальных диалоговых окон 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;
});
});
Это то, что вы ищете
http://jqueryui.com/demos/dialog/#modal
Он блокирует фон, у которого есть кнопка источника просмотра. У вас есть оверлей вообще?
Попробуйте настроить его вручную (не рекомендуется, а скорее css):
$(".ui-widget-overlay").attr('style','background-color: #000; opacity:1; z-index:1000;');
И, конечно же, для параметра модального варианта значение true.
Если цвет слишком сильный, уменьшите непрозрачность соответственно.
когда я изменил модальное значение на "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");
}
);
Просмотрите параметры диалога в API, их довольно много. В дополнение к modal, который устанавливает наложение на страницу, которая блокирует события мыши, существует также closeOnEscape, который, если установлен на false, не позволяет пользователю удалять клавишу эвакуации на клавиатуре, чтобы закрыть диалог и, следовательно, должен взаимодействовать с диалоговое управление напрямую
В вкладках на демонстрационной странице есть значительный API, заправленный http://jqueryui.com/demos/dialog/
Попробуйте создать свою собственную тему с помощью ролика JQuery. Это также помогает в функциональности модальных и других виджетов в библиотеке пользовательского интерфейса JQuery