jquery-qtip弹出div层(使用一个函数传参数弹出)

来源:赵克立博客 分类: HTML5 标签:jquery插件js特效发布时间:2014-05-08 23:05:00最后更新:2016-08-04 21:38:36浏览:5306
版权声明:
本文为博主原创文章,转载请声明原文链接...谢谢。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>

微信号:kelicom QQ群:215861553 紧急求助须知
Win32/PHP/JS/Android/Python