如何自定义 jquery 移动对话框

发布于 2025-01-03 14:19:09 字数 608 浏览 1 评论 0原文

如何删除对话框的默认格式并应用我自己的 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 */
}

原文

How do I remove the default formatting of the dialog box and apply my own CSS?

My attempt isn't working very well...

<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>

EDIT:
And in my CSS:

.ui-dialog.dialog-custom {

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

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

抠脚大汉 2025-01-10 14:19:09

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

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

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

回复收藏 0 原文

睫毛上残留的泪 2025-01-10 14:19:09

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

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

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

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

CSS uses the most unique selector by default, and jQuery Mobile is probably using a more unique selector. You can use the !important keyword to make sure that your CSS declarations are used:

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

If you inspect elements with developer tools like Chrome Dev Tools or Firebug, you can see what styles are being applied and what CSS rule they come from. This will help you decide the best way to add styles to an existing framework.

I'm not sure about dialogs but for page widgets, the min-height CSS property of the element is altered via the jQM framework. You can work-around this by over-writing the jQM resize event handler for dialogs.

回复收藏 0 原文

~没有更多了~