Question

尝试在jquerymobile 1.4.5中创建一个更大宽度的对话框。根据示例和http://demos.jquerymobile.com/1.4.5/pages-dialog/上的说明我认为这应该有用（但似乎没有）。我复制了他们的示例，然后覆盖了所记录的.ui-dialog-contains属性。我正在使用Mac / Chrome渲染页面。我以前见过这篇文章，但是我无法让任何人的解决方案得以解决。我认为其中一些可能是因为jquerymobile的旧版本。

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

<link href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>

<div data-role="page" data-dialog="true">

		<div data-role="header" data-theme="b">
		<h1>Dialog</h1>
		</div>

		<div role="main" class="ui-content">
		<h1>Delete page?</h1>
		<p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
			<a href="dialog/index.html" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-a">Sounds good</a>
			<a href="dialog/index.html" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-a">Cancel</a>
		</div>
	</div>

</body>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dialog example - jQuery Mobile Demos</title>
<link href="favicon.ico" rel="shortcut icon"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">

<style type="text/css"> {
    .ui-dialog-contain  {
        max-width: 1500px;
    }
}
</style>
</head>
<body>

<div data-role="page" data-dialog="true">

    <div data-role="header" data-theme="b">
    <h1>Dialog</h1>
    </div>

    <div role="main" class="ui-content">
    <h1>Delete page?</h1>
    <p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
        <a href="dialog/index.html" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-a">Sounds good</a>
        <a href="dialog/index.html" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-a">Cancel</a>
    </div>
</div>

更改jquerymobile 1.4.5对话框的宽度

0 个答案: