jQuery对话框中的箭头
jQuery对话框中的箭头
提问于 2010-08-13 16:34:09
有什么方法可以让我在jQuery对话框的左边显示箭头提示吗？我想实现如下图中提到的功能。如何使用主题滚轮CSS和图标来做到这一点？
jQuery Dialog Customization http://www.freeimagehosting.net/uploads/74b51bb861.jpg
回答 2
Stack Overflow用户
回答已采纳
发布于 2010-08-13 17:37:10
更新:我在编辑之前发布了我的第一个答案，表明箭头将被放在对话框的主体中，所以这是我的更新代码：
var $mydialog = $('<div></div>').html('<div class="myArrow"></div>Your Dialog Content Here').dialog({autoOpen: false,title: 'Retrieving Product Details', modal:true, width:600, height:400, position:'center'});CSS div已被移到对话框的主要内容div中，myArrow可能类似于：
.myArrow{
display:block;
position:absolute;
width:15px;
height:15px;
left:-15px; /* pushes the arrow OUTSIDE the box */
top:50px; /* or however far from the top you wish */
background: url(path/to/arrow.jpg) center right no-repeat;
margin:0 15px 0 0;
}Stack Overflow用户
发布于 2010-08-13 17:29:26
一个简单的方法是在构建对话框时简单地将html和/或css添加到title属性中，如下所示：
var $mydialog = $('<div></div>').html('Your Dialog Content Here').dialog({autoOpen: false,title: '<div class="myArrow"></div>Retrieving Product Details', modal:true, width:600, height:400, position:'center'});
$mydialog.dialog('open'); //triggers dialog open event, can close with ('close')和myArrow的css：
.myArrow{
display:block;
float:left;
clear:none;
width:15px;
height:15px;
background: url(path/to/arrow.jpg) center center no-repeat;
margin:0 15px 0 0; // some maring on the right to push title away from div;
}希望这能帮上点忙
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3475175
复制相关文章
相似问题
腾讯云开发者
