jQuery UI 对话框 - 与调用对话框的文件不同的样式答案

【问题标题】：jQuery UI Dialog - Different style from the file that calls dialogjQuery UI 对话框 - 与调用对话框的文件不同的样式
【发布时间】：2011-09-20 00:28:28
【问题描述】：

我有一个带有自己的 css 引用的 main.htm 文件。当用户单击 main.htm 上的按钮时，我想打开一个 jQuery UI 对话框。有一个处理此过程的 .js 文件（在 main.htm 中引用）。我的问题是：如何在没有在 main.htm 中添加任何 css 文件的情况下使用 jQuery UI 样式进行对话框？谢谢。

【问题讨论】：

没有 CSS 是不可能的 style。如果您不想添加另一个引用顶部阻止 HTTP 调用，请将您的样式（或 JQUI 样式）添加到样式标记。

标签： jquery user-interface coding-style dialog

【解决方案1】：

我不完全确定您要完成什么。它可能有助于解释你的目标。您将需要一些 CSS 以一种或另一种方式来实现样式。看来您已经掌握了将这种样式动态注入文档的最佳方法 - 是吗？

如果您使用的是 jQuery UI，那么您应该将 jQuery ui css 文件包含在您使用的任何 HTML 文档中。如果由于某种原因，单击按钮时它不可用（假设您正在尝试减少请求...），您可以通过 jQuery('head').append('<link>',{ ...attrs ... }); 以编程方式将 <link rel="href" type="stylesheet" href="..." /> 与 jQuery 相附加

jQuery ui 上的高级主题设置

download page

我注意到您对修改 main.html 的担忧——可能是因为您不希望 jQuery ui 样式影响您网站的其余部分。您应该没问题：jQuery ui 样式表非常具体，它们不会对您网站上的样式进行全局更改，即影响正文字体。

您可以通过在主题滚轮导出期间使用可选命名空间来进一步防止任何冲突（可能仅在 main.html 开始使用它自己的 jQuery ui 时发生） - 如果冲突是您的主要关注点和避免附加到 main.html 的原因.

使用IFRAME 将会有它自己的问题：例如将ui dialog 的拖动限制在iframe 内——可能会使其无用。您可能能够将包含ui dialog 的iframe 组合在一起，当您将对话框移动到内部时，它绝对会重新定位。

您最好挑战修改 main.html 的限制，而不是使用 hack 解决它。可能，在一个蓝色的月亮，打破客户端样式与仅仅在一个绝对定位的 iframe 中跳舞的真正破坏的 jQuery ui 对话框之间的权衡是不值得的 IMO。

【讨论】：

第一项与我的案例有关，但我想将 JQUI 对话框视为单独的 html 文件。我不想在任何时候将 JQUI css 添加到 main.htm。

【解决方案2】：

使用iFrame 可能会解决您的问题。

这是一个使用 jQuery 创建 iFrame 的示例。

var newDialog = $("<iframe>", {
  src: "myIframe.html"
});

$("#yourDiv").append(newDialog);

【讨论】：

我考虑过 iframe，但问题是它需要在其 src 标签中有一个文件。我正在以编程方式创建一个 JQUI 对话框，它基本上是一个 div。
查看我的编辑 - 另外，为什么您无法修改 main.htm 的 CSS？
谢谢 Derek，我会实施您的方法并通知您。 main.htm 是公司共享点站点的页面。我想防止任何冲突。