Question

我需要打开一个自定义大小的弹出窗口。使用来自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>

工作正常。如果要更改宽度（jQuery Mobile Dialog docs），可以看到jQuery Mobile要添加的css规则。

Answer 1

我回答了自己的问题。我发现通过ajax加载，当获取页面时，它只从目标页面获取内容。如果我想提供一些要应用于目标页面的自定义CSS，我需要在父页面（或调用弹出窗口的页面）上提供它。

将对话框宽度jQuery Mobile调整为非Ajax加载页面

1 个答案: