Мне нужно открыть всплывающее окно для нестандартного размера. Используя предложения из мобильных документов 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 ).