Настройте ширину диалогового окна jQuery Mobile для страницы, не загруженной Ajax - PullRequest
2 голосов
/ 13 декабря 2011

Мне нужно открыть всплывающее окно для нестандартного размера. Используя предложения из мобильных документов jQuery, я могу заставить работать нестандартный размер при загрузке страницы с помощью ajax (в том же документе .html). Когда у меня есть отдельный документ .html, он не загружает указанную мной ширину.

<!DOCTYPE html> 
<html> 
<head>
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" > 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
    <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
    <style>
        .ui-dialog .ui-header, 
        .ui-dialog .ui-content, 
        .ui-dialog .ui-footer { 
            max-width: 800px; 
            margin: 10% auto 15px auto; 
        }
    </style>
</head>
<body>
<div data-role="page" id="popup">
<div data-role="content">
    <a data-role="button" href="#" data-rel="back">back</a>
</div>
</div>
</body>
</html>

Это код. Если я ссылаюсь на него в том же файле и просто использую

<a href="#popup" data-rel="dialog">popup</a>

Работает нормально. Вы можете увидеть правила css, которые jQuery Mobile предлагает добавить, если вы хотите изменить ширину ( jQuery Mobile Dialog docs ).

1 Ответ

0 голосов
/ 15 декабря 2011

Я ответил на свой вопрос. Я обнаружил, что при загрузке ajax, когда страница выбирается, она получает содержимое только с целевой страницы. Если я хочу предоставить некоторый пользовательский CSS для применения к целевой странице, мне нужно, чтобы он был на родительской странице (или на странице, вызывающей всплывающее окно).

...