jquery-qtip弹出div层(使用一个函数传参数弹出)
版权声明:
本文为博主原创文章,转载请声明原文链接...谢谢。o_0。
更新时间:
2016-08-04 21:38:36
温馨提示:
学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>扩展弹出层提示</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;font-style:normal;}
a,img{border:0;}
a,a:visited{color:#5e5e5e; text-decoration:none;}
a:hover{color:#4183C4;text-decoration:underline;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
</style>
<script type="text/javascript">
//注意使用前请自己引入jquery qtip3
$(function(){
//msgTooltip('一个测试信息','爱你酷');
});
// Define the tooltip creator method
/**弹出div层信息框
*@param title msgbox title
*@param info msgbox content
*/
function msgTooltip()
{
var dialogtitle='信息提醒';
var dialoginfo='哎哟!出错啦!还没有信息哟!';
if(typeof(arguments[1])!='undefined')dialogtitle=arguments[1];
if(typeof(arguments[0])!='undefined')dialoginfo=arguments[0];
content = '';
$('#msgbox735579768').remove();
$('body').append('<div id="msgbox735579768"></div>');
// Initialize the tooltip on the previous tooltip
$('#msgbox735579768').qtip({
content: {
title: {
text: dialogtitle,
button: '关闭'
},
text: dialoginfo
},
position: {
target: $(document.body), // 将其定位文本页面上
corner: 'center' // 视口的中心处的
},
show: {
when: 'click', // 单击显示
solo: true // 隐藏所有其他的工具提示
},
hide: false,
style: {
width: { max: 650 },
padding: '14px',
border: {
width: 9,
radius: 9,
color: '#777'
},
name: 'light'
},
api: {
beforeShow: function(){
// 淡入模式“blanket”的使用已定义的显示速度
$('#qtip-blanket').fadeIn(this.options.show.effect.length);
},
beforeHide: function(){
// 淡出模式“blanket”的使用定义的隐藏速度
$('#qtip-blanket').fadeOut(this.options.hide.effect.length);
$('#msgbox735579768').remove();
},
onShow: function(){
//添加一个拖动支持
//$('.qtip').kldrag({space:false});
},
onDestroy: function(){
$('#msgbox735579768').remove();
}
}
});
// 创建模态背景上的文档加载所有模型工具提示可以用它
$('<div id="qtip-blanket">').css({
position: 'absolute',
top: 0, // 使用文档的scrollTop的,所以它即使屏幕上的滚动窗口
left: 0,
height: $(document).height(), // 跨越完整的文档高度...
width: '100%', // 全宽
opacity: 0.7, // 稍微透明
backgroundColor: 'black',
zIndex: 5000 // 确保zIndex的是低于6000,以保持它下面的工具提示!
})
.appendTo(document.body) // 附加到文档正文
.hide(); // 最初隐藏
$('#msgbox735579768').click();
}
</script>