Можно ли исправить ширину и высоту диалогового окна jQueryMobile?

Question

Можно ли исправить ширину и высоту диалогового окна jQueryMobile? В настоящее время размер ширины составляет 100%, что действительно ужасно для iPad.

Answer 1

У меня была похожая проблема, мне нужно было контролировать размер диалога и сделать немодальное - чтобы фоновая страница была видна сзади. Метод Фила работает отлично, однако вам нужно сделать фоновый контейнер прозрачным И также сделать так, чтобы вызывающая страница оставалась в DOM и оставалась видимой (начиная с бета-версии 2, DOM автоматически удаляется, поэтому страница, вызывающая диалог, удаляется из DOM когда вы показываете диалог)

Первым шагом было сделать прозрачный оверлей для любой используемой темы, например,

.ui-body-a,
.ui-body-a input,
.ui-body-a select,
.ui-body-a textarea,
.ui-body-a button {
    background-color: transparent;
    font-family: Helvetica, Arial, sans-serif;
}

Затем, чтобы сохранить вызывающую страницу видимой, убедитесь, что она кешируется в DOM, добавив data-dom-cache="true" к вашей вызывающей странице, и я обнаружил, что вам также нужно переопределить стили отображения и z-index (и, конечно, ширину). ) чтобы он оставался видимым и за окном диалога, например

<div id='homePage' data-role="page" data-theme='a' data-dom-cache="true" style='display:block !important;z-index: 0;width:300px'>

    <div data-role="header" data-theme='a'><h1>Header</h1></div><!-- /header -->

    <div data-role="content" data-theme='a' style='margin:0; padding: 0'>   
        <a href="#testdialog" data-role="button"  data-rel="dialog" data-transition="pop">Open Dialog</a>
    </div><!-- /content -->

</div><!-- /page -->

Вы также можете кэшировать каждую страницу в DOM, вместо добавления data-dom-cache="true" к каждой странице, вызывая;

$.mobile.page.prototype.options.domCache = true;

Но это кажется довольно тяжелым.

Edit:

Найден другой возможный способ настройки ширины / высоты, вы можете просто изменить поля диалога;

.ui-dialog .ui-header, 
.ui-dialog .ui-content, 
.ui-dialog .ui-footer {
    margin-left: 100px;
    margin-right: 100px;
}

Вам все равно нужно будет сделать то, что я упомянул о сохранении предыдущей страницы позади!

Answer 2

Вы можете установить ширину страницы в диалоговом окне, например, в реальном времени: http://jsfiddle.net/bXPTd/3/

<div data-role="page" id="bar">
   <a href="#foo" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Open dialog</a>  

</div>

<div data-role="page" id="foo" style="width:300px;">
    Hello Foo
    <a href="#" data-role="button" data-rel="back">Close dialog</a>
</div>

Answer 3

Я не уверен, изменилось ли это недавно;но я подумал, что предложу ответ для jQuery Mobile 1.1.

Чтобы исправить ширину всех диалогов, вам нужно добавить следующее правило CSS:

.ui-dialog-contain { 
    max-width: 600px;
}

Если вы не хотитечтобы применить этот параметр глобально, вы можете настроить таргетинг на отдельную страницу / диалог с его идентификатором, например:

#my-dialog .ui-dialog-contain { 
    max-width: 600px;
}

Answer 4

Мысль поделиться Обновление от RC2 - максимальная ширина теперь по умолчанию равна 500px с возможностью редактирования по умолчанию. Это решает проблему с большими экранами. http://jquerymobile.com/blog/2011/10/19/jquery-mobile-1-0rc2-released/#features

Кроме того, концепция похожа на ту же, что и у Майка, и я все еще настраиваю ее. Но чтобы создать диалог наложения с видимым фоном, вам необходимо: 1. удалить цвет фона и изображение .ui-диалога 2. Убедитесь, что отображение страницы вызова - блок 2. Установите непрозрачность страницы вызова на 50%. Это также (по крайней мере, в Chrome 14) решило все проблемы с z-index, которые у меня возникали автоматически!

.ui-dialog{ background: none;}
.inactive{ opacity: .50; display: block;}

Где неактивен класс, который я добавил в div, откуда был вызван диалог. Вам нужно будет убедиться, что неактивный класс превосходит значение по умолчанию display: none;, и, возможно, использовать некоторый javascript для добавления встроенного стиля.

Answer 5

Я сделал это в дополнение к предложению Майка, фоновая страница видима, только закрыта диалоговым окном, а не фоном диалогового окна.