腾讯弹窗插件

最新推荐文章于 2019-11-06 09:48:51 发布
最新推荐文章于 2019-11-06 09:48:51 发布
阅读量954 收藏
点赞数
分类专栏： HTML5、CSS、JavaScript
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html  xmlns = "http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv = "Content-Type"  content = "text/html;charset=utf-8"  />
< title >无标题文档</ title >
< link  rel = "stylesheet"  href = "msgbox.css"  />
< script  type = "text/javascript"  src = "msgbox.js" ></ script >
< script >
function clickme(i){
     var tip = "";
     switch(i){
         case 1:
             tip = "服务器繁忙，请稍后再试。";
         break;
         case 4:
             tip = "设置成功！";
         break;
         case 5:
             tip = "数据拉取失败";
         break;
         case 6:
             tip = "正在加载中，请稍后...";
         break;
     }
     ZENG.msgbox.show(tip, i);
}
function clickhide(){
     ZENG.msgbox._hide();
}
function clickautohide(i){
     var tip = "";
     switch(i){
         case 1:
             tip = "服务器繁忙，请稍后再试。";
         break;
         case 4:
             tip = "设置成功！";
         break;
         case 5:
             tip = "数据拉取失败";
         break;
         case 6:
             tip = "正在加载中，请稍后...";
         break;
     }
     ZENG.msgbox.show(tip, i, 3000);
}
</ script >
</ head >
 
< body >
< p >4种不同提示图标</ p >
< input  type = "button"  value = "图标1"  onclick = "clickme(1)"  />
< input  type = "button"  value = "图标4"  onclick = "clickme(4)"  />
< input  type = "button"  value = "图标5"  onclick = "clickme(5)"  />
< input  type = "button"  value = "图标6"  onclick = "clickme(6)"  />
< p >隐藏</ p >
< input  type = "button"  value = "隐藏"  onclick = "clickhide()"  />
< p >3秒后自动隐藏</ p >
< input  type = "button"  value = "图标1"  onclick = "clickautohide(1)"  />
< input  type = "button"  value = "图标4"  onclick = "clickautohide(4)"  />
< input  type = "button"  value = "图标5"  onclick = "clickautohide(5)"  />
< input  type = "button"  value = "图标6"  onclick = "clickautohide(6)"  />
< div  class = "zeng_msgbox_layer_wrap"  id = "q_Msgbox"  style = "top:100px;display:block" >
< span  class = "zeng_msgbox_layer"  style = "z-index:10000"  id = "mode_tips_v2" >
< span  class = "gtl_ico_hits" ></ span >您当前没有任何修改< span  class = "gtl_end" ></ span ></ span ></ div >
< div  class = "zeng_msgbox_layer_wrap"  id = "q_Msgbox"  style = "top:200px;display:block" >
< span  class = "zeng_msgbox_layer"  style = "z-index:10000"  id = "mode_tips_v2" >
< span  class = "gtl_ico_fail" ></ span >服务器出错了< span  class = "gtl_end" ></ span ></ span ></ div >
< div  class = "zeng_msgbox_layer_wrap"  id = "q_Msgbox"  style = "top:300px;display:block" >
< span  class = "zeng_msgbox_layer"  style = "z-index:10000"  id = "mode_tips_v2" >
< span  class = "gtl_ico_succ" ></ span >恭喜，添加成功！< span  class = "gtl_end" ></ span ></ span ></ div >
< div  style = "top:400px;display:block"  id = "q_Msgbox"  class = "zeng_msgbox_layer_wrap" >
< span  id = "mode_tips_v2"  style = "z-index:10000"  class = "zeng_msgbox_layer" >
< span  class = "gtl_ico_clear" ></ span >< span  class = "gtl_ico_loading" ></ span >正在加载中，请稍后...< span  class = "gtl_end" ></ span ></ span ></ div >
< div  class = "zeng_msgbox_layer_wrap"  id = "q_Msgbox"  style = " display:block" ></ div >
</ body >
</ html >

CSS文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@charset  "utf-8" ;
/* CSS Document */
 
.zeng_msgbox_layer,
.zeng_msgbox_layer .gtl_ico_succ,
.zeng_msgbox_layer .gtl_ico_fail,
.zeng_msgbox_layer .gtl_ico_hits,
.zeng_msgbox_layer .gtl_ico_clear,
.zeng_msgbox_layer .gtl_end{ display :inline- block ; height : 54px ; line-height : 54px ;
font-weight : bold ; font-size : 14px ; color : #606060 ;
background-image : url ( "gb_tip_layer.png" ); _background-image : url ( "gb_tip_layer_ie6.png" ); background-repeat : no-repeat }
.zeng_msgbox_layer_wrap{ width : 100% ; position : fixed ; _position : absolute ; top : 46% ; left : 0 ; text-align : center ; z-index : 65533 }
.zeng_msgbox_layer{ background-position : 0  -161px ; background-repeat : repeat-x ; padding : 0  18px  0  9px ; margin : 0  auto ; position : relative }
.zeng_msgbox_layer .gtl_ico_succ{ background-position : -6px  0 ; left : -45px ; top : 0 ; width : 45px ; position : absolute }
.zeng_msgbox_layer .gtl_end{ background-position : 0  0 ; position : absolute ; right : -6px ; top : 0 ; width : 6px }
.zeng_msgbox_layer .gtl_ico_fail{ background-position : -6px  -108px ; position : absolute ; left : -45px ; top : 0 ; width : 45px }
.zeng_msgbox_layer .gtl_ico_hits{ background-position : -6px  -54px ; position : absolute ; left : -45px ; top : 0 ; width : 45px }
.zeng_msgbox_layer .gtl_ico_clear{ background-position : -6px  0 ; left : -5px ; width : 5px ; position : absolute ; top : 0 }
.zeng_msgbox_layer .gtl_ico_loading{  width : 16px ; height : 16px ; border : 0 ;
background-image : url (loading.gif); float : left ; margin : 19px  10px  0  5px }

msgbox.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

window.ZENG=window.ZENG || {};
 
ZENG.dom = {getById:  function (id) {
         return  document.getElementById(id);
     },get:  function (e) {
         return  ( typeof  (e) ==  "string" ) ? document.getElementById(e) : e;
     },createElementIn:  function (tagName, elem, insertFirst, attrs) {
         var  _e = (elem = ZENG.dom.get(elem) || document.body).ownerDocument.createElement(tagName ||  "div" ), k;
         if  ( typeof  (attrs) ==  'object' ) {
             for  (k  in  attrs) {
                 if  (k ==  "class" ) {
                     _e.className = attrs[k];
                 }  else  if  (k ==  "style" ) {
                     _e.style.cssText = attrs[k];
                 }  else  {
                     _e[k] = attrs[k];
                 }
             }
         }
         insertFirst ? elem.insertBefore(_e, elem.firstChild) : elem.appendChild(_e);
         return  _e;
     },getStyle:  function (el, property) {
         el = ZENG.dom.get(el);
         if  (!el || el.nodeType == 9) {
             return  null ;
         }
         var  w3cMode = document.defaultView && document.defaultView.getComputedStyle, computed = !w3cMode ?  null  : 
         document.defaultView.getComputedStyle(el,  '' ), value =  "" ;
         switch  (property) {
             case  "float" :
                 property = w3cMode ?  "cssFloat"  :  "styleFloat" ;
                 break ;
             case  "opacity" :
                 if  (!w3cMode) {
                     var  val = 100;
                     try  {
                         val = el.filters[ 'DXImageTransform.Microsoft.Alpha' ].opacity;
                     }  catch  (e) {
                         try  {
                             val = el.filters( 'alpha' ).opacity;
                         }  catch  (e) {
                         }
                     }
                     return  val / 100;
                 }  else  {
                     return  parseFloat((computed || el.style)[property]);
                 }
                 break ;
             case  "backgroundPositionX" :
                 if  (w3cMode) {
                     property =  "backgroundPosition" ;
                     return  ((computed || el.style)[property]).split( " " )[0];
                 }
                 break ;
             case  "backgroundPositionY" :
                 if  (w3cMode) {
                     property =  "backgroundPosition" ;
                     return  ((computed || el.style)[property]).split( " " )[1];
                 }
                 break ;
         }
         if  (w3cMode) {
             return  (computed || el.style)[property];
         }  else  {
             return  (el.currentStyle[property] || el.style[property]);
         }
     },setStyle:  function (el, properties, value) {
         if  (!(el = ZENG.dom.get(el)) || el.nodeType != 1) {
             return  false ;
         }
         var  tmp, bRtn =  true , w3cMode = (tmp = document.defaultView) && tmp.getComputedStyle, 
         rexclude = /z-?index|font-?weight|opacity|zoom|line-?height/i;
         if  ( typeof  (properties) ==  'string' ) {
             tmp = properties;
             properties = {};
             properties[tmp] = value;
         }
         for  ( var  prop  in  properties) {
             value = properties[prop];
             if  (prop ==  'float' ) {
                 prop = w3cMode ?  "cssFloat"  :  "styleFloat" ;
             }  else  if  (prop ==  'opacity' ) {
                 if  (!w3cMode) {
                     prop =  'filter' ;
                     value = value >= 1 ?  ''  : ( 'alpha(opacity='  + Math.round(value * 100) +  ')' );
                 }
             }  else  if  (prop ==  'backgroundPositionX'  || prop ==  'backgroundPositionY' ) {
                 tmp = prop.slice(-1) ==  'X'  ?  'Y'  :  'X' ;
                 if  (w3cMode) {
                     var  v = ZENG.dom.getStyle(el,  "backgroundPosition"  + tmp);
                     prop =  'backgroundPosition' ;
                     typeof  (value) ==  'number'  && (value = value +  'px' );
                     value = tmp ==  'Y'  ? (value +  " "  + (v ||  "top" )) : ((v ||  'left' ) +  " "  + value);
                 }
             }
             if  ( typeof  el.style[prop] !=  "undefined" ) {
                 el.style[prop] = value + ( typeof  value ===  "number"  && !rexclude.test(prop) ?  'px'  :  '' );
                 bRtn = bRtn &&  true ;
             }  else  {
                 bRtn = bRtn &&  false ;
             }
         }
         return  bRtn;
     },getScrollTop:  function (doc) {
         var  _doc = doc || document;
         return  Math.max(_doc.documentElement.scrollTop, _doc.body.scrollTop);
     },getClientHeight:  function (doc) {
         var  _doc = doc || document;
         return  _doc.compatMode ==  "CSS1Compat"  ? _doc.documentElement.clientHeight : _doc.body.clientHeight;
     }
};
 
ZENG.string = {RegExps: {trim: /^s+|s+$/g,ltrim: /^s+/,rtrim: /s+$/,nl2br: /n/g,s2nb: /[x20]{2}/g,
URIencode: /[x09x0Ax0Dx20x21-x29x2Bx2Cx2Fx3A-x3Fx5B-x5Ex60x7B-x7E]/g,escHTML: 
{re_amp: /&/g,re_lt: /</g,re_gt: />/g,re_apos: /x27/g,re_quot: /x22/g},escString: 
{bsls:  //g,sls: ///g,nl: /n/g,rt: /r/g,tab: /t/g},restXHTML: 
{re_amp: /&/g,re_lt: /&lt;/g,re_gt: /&gt;/g,re_apos: /&(?:apos| #0?39);/g,re_quot: /&quot;/g},
write: /{(d{1,2})(?::([xodQqb]))?}/g,isURL: /^(?:ht|f)tp(?:s)?: //(?:[w-.]+).w+/i,cut: /[x00-xFF]/,getRealLen: 
{r0: /[^x00-xFF]/g,r1: /[x00-xFF]/g},format: /{([dw.]+)}/g},commonReplace:  function (s, p, r) {
         return  s.replace(p, r);
     },format:  function (str) {
         var  args = Array.prototype.slice.call(arguments), v;
         str = String(args.shift());
         if  (args.length == 1 &&  typeof  (args[0]) ==  'object' ) {
             args = args[0];
         }
         ZENG.string.RegExps.format.lastIndex = 0;
         return  str.replace(ZENG.string.RegExps.format,  function (m, n) {
             v = ZENG.object.route(args, n);
             return  v === undefined ? m : v;
         });
     }};
 
 
ZENG.object = {
     routeRE: /([dw_]+)/g,
     route:  function (obj, path) {
         obj = obj || {};
         path = String(path);
         var  r = ZENG.object.routeRE, m;
         r.lastIndex = 0;
         while  ((m = r.exec(path)) !==  null ) {
             obj = obj[m[0]];
             if  (obj === undefined || obj ===  null ) {
                 break ;
             }
         }
         return  obj;
     }};
 
 
 
var  ua = ZENG.userAgent = {}, agent = navigator.userAgent;
ua.ie = 9 - ((agent.indexOf( 'Trident/5.0' ) > -1) ? 0 : 1) - (window.XDomainRequest ? 0 : 1) - (window.XMLHttpRequest ? 0 : 1);
 
 
 
if  ( typeof  (ZENG.msgbox) ==  'undefined' ) {
     ZENG.msgbox = {};
}
ZENG.msgbox._timer =  null ;
ZENG.msgbox.loadingAnimationPath = ZENG.msgbox.loadingAnimationPath || ( "loading.gif" );
ZENG.msgbox.show =  function (msgHtml, type, timeout, opts) {
     if  ( typeof  (opts) ==  'number' ) {
         opts = {topPosition: opts};
     }
     opts = opts || {};
     var  _s = ZENG.msgbox,
      template =  '<span class="zeng_msgbox_layer" style="display:none;z-index:10000;" id="mode_tips_v2">
      <span class="gtl_ico_{type}"></span>{loadIcon}{msgHtml}
      <span class="gtl_end"></span></span>' , 
      loading =  '<span class="gtl_ico_loading"></span>' , typeClass = [0, 0, 0, 0,  "succ" ,  "fail" ,  "clear" ], mBox, tips;
     _s._loadCss && _s._loadCss(opts.cssPath);
     mBox = ZENG.dom.get( "q_Msgbox" ) || ZENG.dom.createElementIn( "div" , document.body,  false , {className:  "zeng_msgbox_layer_wrap" });
     mBox.id =  "q_Msgbox" ;
     mBox.style.display =  "" ;
     mBox.innerHTML = ZENG.string.format(template, 
     {type: typeClass[type] ||  "hits" ,msgHtml: msgHtml ||  "" ,loadIcon: type == 6 ? loading :  "" });
     _s._setPosition(mBox, timeout, opts.topPosition);
};
ZENG.msgbox._setPosition =  function (tips, timeout, topPosition) {
     timeout = timeout || 5000;
     var  _s = ZENG.msgbox, bt = ZENG.dom.getScrollTop(), ch = ZENG.dom.getClientHeight(), t = Math.floor(ch / 2) - 40;
     ZENG.dom.setStyle(tips,  "top" , 
     ((document.compatMode ==  "BackCompat"  || ZENG.userAgent.ie < 7) ? bt : 0) + (( typeof  (topPosition) ==  "number" ) ? topPosition : t) +  "px" );
     clearTimeout(_s._timer);
     tips.firstChild.style.display =  "" ;
     timeout && (_s._timer = setTimeout(_s.hide, timeout));
};
ZENG.msgbox.hide =  function (timeout) {
     var  _s = ZENG.msgbox;
     if  (timeout) {
         clearTimeout(_s._timer);
         _s._timer = setTimeout(_s._hide, timeout);
     }  else  {
         _s._hide();
     }
};
ZENG.msgbox._hide =  function () {
     var  _mBox = ZENG.dom.get( "q_Msgbox" ), _s = ZENG.msgbox;
     clearTimeout(_s._timer);
     if  (_mBox) {
         var  _tips = _mBox.firstChild;
         ZENG.dom.setStyle(_mBox,  "display" ,  "none" );
     }
};
插件
Bill11YAng
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
给软件加弹窗引爆QQ群技术（实操视频教程+工具打包)
05-29
这通常需要巧妙设计弹窗内容，使其具有吸引力，同时遵守腾讯关于使用QQ群的政策和规定，以免被封禁。 3. **实操视频教程**：在学习这种技术时，视频教程是一种直观有效的教学方式。它们通常包含步骤演示、代码示例...
帝国cms 7.2 QQ登陆插件
03-29
3. **版本更新**：定期关注帝国CMS和腾讯开放平台的更新，确保插件的兼容性和安全性。 总的来说，帝国CMS 7.2 QQ登录插件是提升网站用户体验的有效工具，它结合了帝国CMS的强大功能和QQ账号的广泛使用，为企业和...
ZENG msgbox仿qq提示
weixin_30788731的博客
10-30 429
ZENG.msgbox.show("设置成功！", 4, 2000); ZENG.msgbox.show("服务器繁忙，请稍后再试。", 1, 2000); ZENG.msgbox.show("数据拉取失败", 5, 2000); ZENG.msgbox.show(" 正在加载中，请稍后...", 6,8000); 有4种提示效果，根据参数配置。 /*1、消息4、正确5、...
msgbox.js的修改使在iframe的可视区域显示
weixin_30663471的博客
04-02 98
msgbox.js为之前的QQ空间的提示效果插件。但是在iframe自适应高度之后，高度会变得很高，而msgbox是body区域垂直居中显示，而不是可视区域垂直居中。最终在iframe里就会变得定位错误，导致用户看不到提示内容。 修复： ZENG.msgbox._setPosition = function (tips, timeout, topPosition) { ...
一款腾讯UED设计的提示插件（使用教程）
nqxcwl的专栏
11-06 319
　　这是一款腾讯UED设计的提示插件，看着肯定很眼熟吧，闲话不多说，直接上demo吧。 　　显示 ZENG.msgbox.show(提示信息,图标类型); 　　隐藏： ZENG.msgbox._h...
java异常处理，ajax调用后台异常，页面跳转
热门推荐
漂浮
09-12 1万+
function clickautohideErr(data,i){ var result = data.responseText; if(result !=null && result !=''){ var url = getRootPath()+"/view/error/notAuthorize.jsp"; location.href = url; //$(docum
如何彻底关闭电脑弹窗.docx
08-13
3. 使用杀毒软件的广告拦截功能：许多杀毒软件如腾讯电脑管家提供了广告拦截功能，可以有效地阻止弹窗广告。 除了软件层面的处理，我们还需要关注系统的通知设置。系统级别的通知也是弹窗来源之一。在Windows系统中...
一款腾讯UED设计的提示插件
12-23
【描述】：这款提示插件以其出色的用户体验而备受赞誉，它不仅能够提供基本的提示功能，如错误信息显示、成功消息反馈，还能实现更为复杂的交互效果，如加载提示、弹窗对话框等。通过这款插件，开发者可以轻松地将...
腾讯地图坐标拾取器(原创)
03-07
腾讯地图api和layui结合实现的腾讯地图坐标拾取器 可回调选择结果 layui.config({ base: './' }).use(["addrHelper"], function() { ... width: "80vw", //可选项，弹窗的宽度 默认80vw height: "80vh",
C#弹窗控件,仿QQ右下角弹出窗体
07-30
C#弹窗控件,仿QQ右下角弹出窗体 可自行再次开发
腾讯UED 漂亮的提示信息
weixin_34010949的博客
09-12 123
漂亮 大气 不错的风格  提示后自动消失  javascript CSS样式： .zeng_msgbox_layer, .zeng_msgbox_layer .gtl_ico_succ, .zeng_msgbox_layer .gtl_ico_fail, .zeng_msgbox_layer .gtl_ico_hits, .zeng_msgbox_layer .gt...
js msgbox 插件
yxp 的博客
12-31 3861
javaScript msgBox 插件说明 初学 JS 参照 vb msgbox 造了一个 js msgBox 的轮子。源码下载链接：https://download.csdn.net/download/yxp_xa/10887656 参数 width : 220, msgBox 窗体宽度，默认220，最小值为150 height : 170, msgBox 窗体高度，默认...
基于jquery的弹出层插件
diaosui7664的博客
05-19 100
测试页面需要引用jquery的js文件 插件文件jquery.Jwin.js jquery.Jwin插件的使用参数都有详细说明，代码如下： (function ($) { var imgdir = 'images/';//图片文件夹路径 var autoHide=false;//悬浮div是否自动隐藏 var ...
MessageBox.Show()中的提示信息中的参数使用
雨水霂
01-30 4040
不废话，直接上示例。             int r1 = ProcSqlHelper.ExecuteNonQuery(sql1, CommandType.Text);             int r2 = ProcSqlHelper.ExecuteNonQuery(sql2, CommandType.Text);             int r3 = ProcSqlHe
uniapp腾讯视频插件
最新发布
09-03
对于UniApp开发的腾讯视频插件，你可以使用uni-app-txvideo插件。这是一个基于uni-app框架开发的腾讯视频插件，可以方便地在UniApp应用中集成腾讯视频播放功能。 要使用uni-app-txvideo插件，你需要先安装插件依赖...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值