Jquery ui对话框按钮不适用于引导程序答案

【问题标题】：Jquery ui dialog buttons not working with bootstrapJquery ui对话框按钮不适用于引导程序
【发布时间】：2015-09-11 17:06:55
【问题描述】：

我将jquery 1.11.3 与jquery-ui 1.11.4 和bootstrap 3.3.5 一起使用。
除了左上角minibutton 的标准关闭minibutton 外，所有工作正常。
按钮上不显示符号“X”，但它在关闭对话框时有效。
检查创建的标记对于对话框，它确实缺少显示“X”图标的部分。
对话框很简单：

$('#info').dialog({ autoOpen: true,
     width: 700,
     title: 'User Info',
     position: { my: "center middle", at: "center middle", of: document.body} }
  );

我知道jquery-ui 和bootstrap 之间存在兼容性问题，原因是按钮和工具提示插件的名称冲突。
所以我应用了https://stackoverflow.com/a/27745464/1233379 中建议的解决方法，但是虽然它可以防止一些 javascript 错误，但它似乎不能恢复对话框的全部功能。

注释掉引导javascript包含标签，jquery-ui按预期工作。

一些建议？

这是小提琴：https://jsfiddle.net/43hrvy26/

【问题讨论】：

你能提供一个演示或小提琴吗？
上面添加的小提琴网址
我在小提琴中看到了它。哪个浏览器？
顺便说一句，我将引导程序添加到 fiddle
它看起来不错，除非我在这里遗漏了一些东西。 x 符号位于对话框右侧的浅灰色小方块上。它还可以正常工作并通过单击关闭对话框。

标签： javascript twitter-bootstrap jquery-ui

【解决方案1】：

您可以更改 JS/CSS 包含的顺序

https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css

参考https://jsfiddle.net/ZigmaEmpire/43hrvy26/2/

由于 jquery-ui.css 最后出现，该文件中的 CSS 将覆盖引导程序中任何相应的冲突 CSS，因此现在您可以利用 jquery UI CSS 而不是引导程序 CSS 定义（如果有）

【讨论】：