奇怪的是,我发现很难将 jquery 的 onclick 事件处理程序绑定(bind)到这个 fiddle 。我什至不知道我做错了什么。 html 如下:-
<ul>
<li><a id="tooltip_1" href="#" class="tooltip" >Trigger1</a><li>
<li><a id="tooltip_2" href="#" class="tooltip" >Trigger2</a><li>
<li><a id="tooltip_3" href="#" class="tooltip" >Trigger3</a><li>
</ul>
<div style="display: none;">
<div id="data_tooltip_1">
data_tooltip_1: You can hover over and interacte with me
</div>
<div id="data_tooltip_2">
data_tooltip_2: You can hover over and interacte with me
</div>
<div id="data_tooltip_3">
data_tooltip_3: You can hover over and interacte with me
</div>
</div>
这样设计:-
li {
padding: 20px 0px 0px 20px;
}
像这样的 jquery:-
$(document).ready(function() {
$('.tooltip[id^="tooltip_"]').each
(function(){
$(this).qtip({
content: $('#data_' + $(this).attr('id')),
show: {
},
hide: {
fixed: true,
delay: 180
}
});
});
});
您查看我创建的 fiddle 页面:- http://jsfiddle.net/UyZnb/339/。
同样,我如何为其实现类似 jquery 模态的外观,以便工具提示成为焦点?
最佳答案
工作演示:使用鼠标悬停:http://jsfiddle.net/swxzp/ 或使用点击http://jsfiddle.net/rjGeS/ (我写了一个小的 JQuery/Css/Opacity demo)
更新:触发器 1、2 和 3 的工作示例:http://jsfiddle.net/HeJqg/
工作原理:
它有 2 个 div,即 background
,用于使其余页面像模态一样变成灰色,第二个 div large
将充当工具提示的占位符,因此即使背景为灰色,您也可以随时关闭和打开它。
休息随意玩弄代码,希望它能帮助事业 :)
代码
$('.tooltip_display').click(function() {
var $this = $(this);
$("#background").css({
"opacity": "0.3"
}).fadeIn("slow");
$("#large").html(function() {
$('.ttip').css({
left: $this.position() + '20px',
top: $this.position() + '50px'
}).show(500)
}).fadeIn("slow");
});
$('.note').on('click', function() {
$('.ttip').hide(500);
$("#background").fadeOut("slow");
$("#large").fadeOut("slow");
});
$("#large").click(function() {
$(this).fadeOut();
});
CSS
.ttip {
position: absolute;
width: 350px;
height: 100px;
color: #fff;
padding: 20px;
-webkit-box-shadow: 0 1px 2px #303030;
-moz-box-shadow: 0 1px 2px #303030;
box-shadow: 0 1px 2px #303030;
border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
-webkit-border-radius: 8px 8px 8px 8px;
-o-border-radius: 8px 8px 8px 8px;
background-image:-moz-linear-gradient(top, #F45000, #FF8000);
background-image: -webkit-gradient(linear, left top, left bottom, from(#F45000), to(#FF8000));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F45000', endColorstr='#FF8000', GradientType=0);
background-color:#000;
display: none
}
.contents {
font-size: 15px;
font-weight:bold
}
.note {
font-size: 13px;
text-align:center;
display:block;
width: 100%
}
#background{
display: none;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #000000;
z-index: 1;
}
#large {
display: none;
position: absolute;
background: #FFFFFF;
padding: 0px;
z-index: 10;
min-height: 0px;
min-width: 0px;
color: #336699;
}
HTML
<span class="tooltip_display">Trigger</span>
<div id="large">
<div class="ttip">
<div class="contents">Here goes contents...</div>
<span class="note">(click here to close the box)</span>
</div>
</div>
<div id="background"></div>
工作演示的图片:
关于javascript - 单击时显示工具提示并向其添加模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11622734/