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中的一些元素或插入跨度等布局。

首先，您需要使用调试器（如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事件处理程序来解决此问题。

如何自定义jquery移动对话框

2 个答案: