如何自定义一个jquery移动对话框

Question

如何删除对话框的默认格式并应用我自己的 CSS？

我的尝试效果不佳...

<div data-role="dialog" id="confirm-clear" class="dialog-custom" >
    <div data-role="content" >
        <p>Some text.</p>
        <p><a href="#" data-role="button" data-inline="true">Yes</a><a href="#" data-role="button" data-inline="true" data-rel="back">No</a></p>
    </div>
</div>

编辑： 在我的 CSS 中：

.ui-dialog.dialog-custom {

background: repeat scroll 0 0 rgba(0,0,0,.5);

height:200px; /* this doesn't do anything */
}

Answer 1

jQM 使用多种样式来实现其主题化，例如 webkit 渐变和背景位置偏移的背景图像。它还将一些元素包装在 div 中或插入 span 等以进行布局。

首先，您需要使用调试器（例如 Chrome 的开发人员工具）并检查对话框，在计算样式下，您可以查看您的样式以及它们是否被覆盖或其效果。您还可以查看 jQM 插入的任何额外布局元素并关闭 jQM 的样式，直到您的样式生效。

现在您可以通过使用 !important 或修改 jQM 的 CSS 文件来开始覆盖 jQM 的样式

Answer 2

CSS 默认使用最独特的选择器，而 jQuery Mobile 可能使用更独特的选择器。您可以使用 !important 关键字来确保使用您的 CSS 声明：

.ui-dialog.dialog-custom {
    background : repeat scroll 0 0 rgba(0,0,0,.5);
    height     :200px !important;
}

如果您使用 Chrome Dev Tools 或 Firebug 等开发人员工具检查元素，您可以看到正在应用的样式以及它们来自什么 CSS 规则。这将帮助您确定向现有框架添加样式的最佳方式。

我不确定对话框，但对于页面小部件，元素的 min-height CSS 属性是通过 jQM 框架更改的。您可以通过覆盖对话框的 jQM resize 事件处理程序来解决此问题。