width:%200,%20
radius:%204%20
},%20
name:%20’light’,%20
width:%20570%20
}%20
})%20
});%20
});%20
</script>%20
%20
效果如图所示：%20
7、Modal%20tooltips%20
html如下所示：%20
%20%20
<div%20id=”content”>%20
<a%20href=”#”%20rel=”modal”>Click%20here</a>%20
</div>%20
%20
JS代码：%20
%20%20
<script%20type=”text/javascript”>%20
$(document).ready(function()%20
{%20
$(‘a[rel=”modal”]:first’).qtip(%20
{%20
content:%20{%20
title:%20{%20
text:%20’Modal%20tooltips%20sample’,%20
button:%20’Close’%20
},%20
text:%20’hello%20world’%20
},%20
position:%20{%20
target:%20$(document.body),%20
corner:%20’center’%20
},%20
show:%20{%20
when:%20’click’,%20
solo:%20true%20
},%20
hide:%20false,%20
style:%20{%20
width:%20{%20max:%20350%20},%20
padding:%20’14px’,%20
border:%20{%20
width:%209,%20
radius:%209,%20
color:%20’#666666’%20
},%20
name:%20’light’%20
},%20
api:%20{%20
beforeShow:%20function()%20
{%20
$(‘#qtip-blanket’).fadeIn(this.options.show.effect.length);%20
},%20
beforeHide:%20function()%20
{%20
$(‘#qtip-blanket’).fadeOut(this.options.hide.effect.length);%20
}%20
}%20
});%20
$(‘<div%20id=”qtip-blanket”>’)%20
.css({%20
position:%20’absolute’,%20
top:%20$(document).scrollTop(),%20
left:%200,%20
height:%20$(document).height(),%20
width:%20’100%’,%20
opacity:%200.7,%20
backgroundColor:%20’black’,%20
zIndex:%205000%20
})%20
.appendTo(document.body)%20
.hide();%20
});%20
</script>%20
%20
效果如图所示：%20
