我正在使用自定义jQuery 1.10.3主题.我从主题滚筒直接下载,我故意没有改变任何东西.
我创建了一个对话框,我得到一个空的灰色方块,其中关闭图标应为:

我比较了在我的页面上生成的代码:
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<spanid="ui-id-2" class="ui-dialog-title">Title</span>
<button class="ui-dialog-titlebar-close"></button>
</div>
Run Code Online (Sandbox Code Playgroud)
在Dialog Demo页面上生成的代码:
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<span id="ui-id-1" class="ui-dialog-title">Basic dialog</span>
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close">
<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
<span class="ui-button-text">close</span>
</button>
</div>
Run Code Online (Sandbox Code Playgroud)
编辑:代码的不同部分是由jQueryUI 生成的,而不是我,所以我不能只是添加span标签而不编辑jqueryui js文件,这似乎是一个糟糕/不必要的选择,以实现正常的功能.
以下是用于生成代码部分的javascript:
this.element.dialog({
appendTo: "#summary_container",
title: this.title(),
closeText: "Close",
width: this.width,
position: {
my: "center top",
at: ("center top+"+(window.innerHeight*.1)),
collision: "none"
},
modal: false,
resizable: false,
draggable: false,
show: "fold",
hide: "fold", …Run Code Online (Sandbox Code Playgroud) 我已经能够获得一些工具提示,最终使用以下代码:
<a href="#" rel="tooltip" title="Tool tip text here">Hover over me</a>
Run Code Online (Sandbox Code Playgroud)
然后
<script>
$('[rel=tooltip]').tooltip();
</script>
Run Code Online (Sandbox Code Playgroud)
我遇到的问题是它使用的是jQueryUI工具提示(没有箭头,大丑陋的工具提示)而不是Bootstraps.
我需要做些什么来使用Bootstrap工具提示而不是jQueryUI?
我使用以下代码显示jQuery UI对话框:
var $dialog = $('<div></div>')
.text(msg)
.dialog({
autoOpen: false,
height: 140,
modal: true,
title: "Confirm",
buttons: {
"Yes": function() {
$(this).dialog('close');
},
"Cancel": function() {
$(this).dialog('close');
}
}
});
$dialog.dialog('open');
Run Code Online (Sandbox Code Playgroud)
但是,按钮没有样式.我注意到为按钮生成的HTML是:
<div class="ui-dialog-buttonset">
<button>Yes</button>
<button>Cancel</button>
</div>
Run Code Online (Sandbox Code Playgroud)
从jQuery UI演示中它是:
<div class="ui-dialog-buttonset">
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Ok</span></button>
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Cancel</span></button>
</div>
Run Code Online (Sandbox Code Playgroud)
即缺少CSS样式.你知道为什么吗?