Как изменить использование window.open (& # 8230;) для создания ненавязчивого модального окна HTML?
-
04-07-2019 - |
Вопрос
У меня есть функция, которая запускает окно javascript, например, это
function genericPop(strLink, strName, iWidth, iHeight) {
var parameterList = "location=0,directories=0,status=0,menubar=0,resizable=no, scrollbars=no,toolbar=0,maximize=0,width=" + iWidth + ", height=" + iHeight;
var new_window="";
new_window = open(strLink, strName, parameterList);
window.self.name = "main";
new_window.moveTo(((screen.availWidth/2)-(iWidth/2)),((screen.availHeight/2)-(iHeight/2)));
new_window.focus();
}
Эта функция вызывается примерно 52 раза из разных мест в моем веб-приложении.
Я хочу изменить этот код, чтобы использовать модальное всплывающее окно DHTML. Изменение должно быть максимально незаметным.
Чтобы сохранить это решение наравне со старым решением, я думаю, что также нужно сделать следующее
<Ол>Я подумал, что это решение наиболее близко к тому, что я хочу, но я не мог понять, как включить его.
Редактировать: Двое из вас дали мне хорошее руководство. Спасибо. Но позвольте мне переформулировать мою проблему здесь. Я перефакторинг существующего кода. Я должен избегать любых изменений в настоящем HTML или CSS. В идеале я бы хотел добиться этого эффекта, сохранив сигнатуру функции genericPop (...).
Решение
Вот мое решение с использованием библиотек jQuery и jQuery UI. Ваш API не изменен , но параметр 'name' игнорируется . Я использую iframe
для загрузки содержимого из указанного strLink
, а затем отображаю этот iframe
как дочерний элемент для сгенерированного div
, который затем преобразуется в модальное всплывающее окно с помощью jQuery:
function genericPop(strLink, strName, iWidth, iHeight) {
var dialog = $('#dialog');
if (dialog.length > 0) {
dialog.parents('div.ui-dialog').eq(0).remove();
}
dialog = $(document.createElement('div'))
.attr('id', 'dialog')
.css('display', 'none')
.appendTo('body');
$(document.createElement('iframe'))
.attr('src', strLink)
.css('width', '100%')
.css('height', '100%')
.appendTo(dialog);
dialog.dialog({
draggable: false,
modal: true,
width: iWidth,
height: iHeight,
title: strName,
overlay: {
opacity: 0.5,
background: "black"
}
});
dialog.css('display', 'block');
}
// example of use
$(document).ready(function() {
$('#google').click(function() {
genericPop('http://www.google.com/', 'Google', 640, 480);
return false;
});
$('#yahoo').click(function() {
genericPop('http://www.yahoo.com/', 'Yahoo', 640, 480);
return false;
});
});
Документация для пользовательского интерфейса / диалога jQuery .
Другие советы
Я использую этот код диалога , чтобы делать красивые почти то же самое.
Если я правильно помню, реализация по умолчанию не поддерживает изменение размера диалога. Если вы не можете сделать только с одним размером, вы можете изменить код или CSS для отображения нескольких значений ширины.
использовать легко:
showDialog('title','content (can be html if encoded)','dialog_style/*4 predefined styles to choose from*/');
Изменение js для поддержки нескольких значений ширины:
Добавьте ширину и высоту в качестве атрибутов для отображения функции диалога и установите их для элементов диалога и содержимого диалога в строке 68
Попробуйте Control.Window , для которого требуется Prototype
Вот как я это использую:
<a href="/messages/new" class="popup_window">New Message</a>
И в моем файле Javascript:
$(document).observe("dom:loaded", function() {
$("a.popup_window").each(function(element) {
new Control.Modal(element, { overlayOpacity: 0.75,
className: 'modal',
method: 'get',
position: 'center' });
});
});
Теперь, если вы хотите закрыть открытое в данный момент всплывающее окно, выполните:
Control.Modal.current.close()