Показать модальное диалоговое окно jquery ui в полном окне - PullRequest
Новая
       14

Показать модальное диалоговое окно jquery ui в полном окне

3 голосов
/ 13 октября 2011

Я хочу отобразить модальное диалоговое окно, которое содержит несколько элементов, включая iframe.Я хочу, чтобы этот диалог занимал около 90% ширины и высоты окна.Разметка похожа на следующую: 

<div id="dialog">
    <div>Header information</div>
    <iframe></iframe>
</div>

Как этого добиться?Когда я использую диалоговое окно jquery ui, даже когда я задаю ширину и высоту через параметры диалога или класс, они переопределяются встроенными стилями, которые jquery ui назначает элементам.

1 Ответ

5 голосов
/ 14 октября 2011

Я сделал это, определив размеры окна, а затем соответственно установив ширину диалога и высоту фрейма. Следующий код может быть не самым хорошим, но он работает и может быть легко изменен, чтобы сделать ширину и высоту в процентах меньше, чем у окна. 

var dlg = $("#dialog"); // Get the dialog container.
// Get the window dimensions.
var width = $(window).width();
var height = $(window).height();

// Provide some space between the window edges.
width = width - 50;
height = height - 150; // iframe height will need to be even less to account for space taken up by dialog title bar, buttons, etc.

// Set the iframe height.
$(dlg.children("iframe").get(0)).css("height", height + "px");

dlg.dialog({
    modal: true,
    height: "auto", // Set the height to auto so that it grows along with the iframe.
    width: width
});
...