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>