jQuery UI对话框按钮不适用于引导程序 [英] Jquery ui dialog buttons not working with bootstrap

问题描述

我正在将jquery 1.11.3与jquery-ui 1.11.4和bootstrap 3.3.5一起使用. 除了在jquery ui dialog左上角的标准关闭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/

解决方案

您可以更改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定义(如果有的话)

I'm using jquery 1.11.3 with jquery-ui 1.11.4 and with bootstrap 3.3.5 .
All works fine except for standard close minibutton on the jquery ui dialog upper left corner.
The symbol "X" doesn't show on the button, nonetheless it works in closing the dialog.
Examining the markup created for the dialog, it really lacks the part that show the "X" icon.
The dialog is very simple:

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

I'm aware of the compatibility issues between jquery-ui and bootstrap, due to name collision on button and tooltip plugins.
So I applied the workaround suggested in https://stackoverflow.com/a/27745464/1233379 but whereas it prevent some javascript error, it not seems to restore full functionality of dialog.

Commenting out bootstrap javascript include tag, jquery-ui works as expected.

Some advice?

Here's the fiddle: https://jsfiddle.net/43hrvy26/

解决方案

You can change the order of the JS/CSS inclusion

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

Refer https://jsfiddle.net/ZigmaEmpire/43hrvy26/2/

As jquery-ui.css comes last the CSS in that file will override any corresponding conflicting CSS in bootstrap, so now you can take advantage of jquery UI CSS instead of bootstrap CSS definitions if any

这篇关于jQuery UI对话框按钮不适用于引导程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！