所以,我正在尝试创建一个小的确认对话框(内联,工具提示),当用户点击删除按钮时。
我想象它看起来有点像这样
(但只有一些文本和“确定”和“取消”按钮)。 但我不是来问如何为其设置样式的。
我倾向于使用qTip2插件完成此工作,但如果你有更好的替代方案,我也可以考虑。
那么,我应该如何启动带有一些交互元素的工具提示,并仅在失去焦点或单击关闭按钮时关闭它。同时 - 删除按钮是通过Ajax加载的。
有什么想法吗?
谢谢,祝好!
<button id="gear">Gear</button>
<div style="display:none;" id="menu">
<div class="menuitem">Rename</div><br>
<div class="menuitem">Duplicate</div><br>
<div class="menuitem">Delete</div><br>
</div>
#gear {
margin:100px;
}
.menuitem {
padding-left: 10px;
padding-right: 10px;
font-size: 9px;
margin-bottom: 3px;
width: 75px;
}
JavaScript$(function() {
$("#gear").button({
icons: {
primary: "ui-icon-gear",
secondary: "ui-icon-triangle-1-s"
},
text: false
}).qtip({
content: {
text: $('#menu')
},
show: {
event: 'click',
solo: true,
modal: true
},
style: {
classes: 'ui-tooltip-dark ui-tooltip-shadow'
},
position: {
my: 'top center',
at: 'bottom center',
}
});
$(".menuitem").button().click(function(){
alert($(this).text());
});
});