Question

我将jquery 1.11.3与jquery-ui 1.11.4和bootstrap 3.3.5一起使用。
除minibutton左上角的标准关闭jquery ui dialog外，所有工作正常。
符号＆＃34; X＆＃34;没有显示在按钮上，但它在关闭对话框时起作用。
检查为对话框创建的标记，它确实缺少显示＆＃34; X＆＃34;图标。
对话框非常简单：

$('#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错误，但它似乎无法恢复对话框的完整功能。

注释掉bootstrap javascript include标签，jquery-ui按预期工作。

一些建议？

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

Answer 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将覆盖bootstrap中任何相应的冲突CSS，所以现在你可以利用jquery UI CSS而不是bootstrap CSS定义（如果有的话） / p>

Jquery ui对话框按钮无法使用bootstrap

1 个答案: