Xtiper

Xtiper 是一款整合 PC 、移动端的弹层弹窗(甚至还有弹幕)解决方案。采用原生的 javascript 编写,体积小,不依赖任何 js 库,不加载任何图片,使用方便。

此脚本不应直接安装,它是一个供其他脚本使用的外部库。如果您需要使用该库,请在脚本元属性加入:// @require https://update.gf.qytechs.cn/scripts/449512/1413237/Xtiper.js

  1. (function () {
  2. let cssResource = `@charset "utf-8";
  3. .xtiper{position:relative;}
  4. .xtiper_msg{transition-timing-function:ease-out;transition-duration:.2s;transition-property:transform,opacity;}
  5. .xtiper_msg{position:fixed;left:50%;z-index:99999;overflow:hidden;max-width:752px;min-height:50px;border-radius:3px;box-shadow:0 0 10px rgba(0,0,0,.2);font-size:14px;line-height:50px;opacity:0;}
  6. .xtiper_msg_black{background-color:rgba(0,0,0,.75);color:#fff;}
  7. .xtiper_msg_white{background-color:rgba(255,255,255,.95);color:#222;}
  8. .xtiper_msg_middle{top:50%;margin-top:-25px;transform:scale(0,0);}
  9. .xtiper_msg_top{top:0;transform:translate(0,-100%) scale(1,1);}
  10. .xtiper_msg_bottom{bottom:0;transform:translate(0,100%) scale(1,1);}
  11. .xtiper_msg.xon{opacity:1;}
  12. .xtiper_msg_middle.xon{transform:scale(1,1);}
  13. .xtiper_msg_top.xon{transform:translate(0,0) scale(1,1);}
  14. .xtiper_msg_bottom.xon{transform:translate(0,0) scale(1,1);}
  15. .xtiper_msg p{padding:0 24px;word-spacing:nowrap;}
  16. .xtiper_danmu{left:0;border:3px solid transparent;background-origin:content-box;font-weight:700;font-size:16px;opacity:1;transition-property:none;}
  17. .xtiper_danmu_animate{animation:danmu_animate 6s 1 linear;-webkit-animation:danmu_animate 6s 1 linear;}
  18. .xtiper_danmu_light{border:3px solid red;}
  19. @keyframes danmu_animate{100%{transform:translateX(-102%);}
  20. }
  21. .xtiper_tips{position:absolute;z-index:99999;max-width:200px;box-shadow:0 0 5px rgba(0,0,0,.3);opacity:0;transition-timing-function:ease-in;transition-duration:.1s;transition-property:opacity,transform;transform:scale(0,0);}
  22. .xtiper_tips.xon{opacity:1;transition-duration:.2s;transform:scale(1,1);}
  23. .xtiper_tips p{position:relative;z-index:2;padding:10px 16px;border-radius:3px;background-color:#000;color:#fff;font-size:12px;line-height:18px;}
  24. .xtiper_tips em{position:absolute;z-index:1;display:block;width:10px;height:10px;background-color:#000;box-shadow:0 0 5px rgba(0,0,0,.3);transform:rotate(45deg);}
  25. .xtiper_tips_left em{top:12px;right:-4px;}
  26. .xtiper_tips_right em{top:12px;left:-4px;}
  27. .xtiper_tips_top em{bottom:-4px;left:12px;}
  28. .xtiper_tips_bottom em{top:-4px;left:12px;}
  29. .xtiper_win{z-index:99999;}
  30. .xtiper_win_fixed{position:fixed;top:0;left:0;z-index:99999;width:100%;height:100%;}
  31. .xtiper_bg{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;background-color:rgba(0,0,0,0);transition-timing-function:ease-in;transition-duration:.1s;transition-property:background-color,opacity;}
  32. .xtiper_bg.xmin{display:none;}
  33. .xtiper_bg_white{background-color:rgba(255,255,255,0);transition:50ms ease-in;}
  34. .xtiper_win.xon .xtiper_bg{background-color:rgba(0,0,0,.5);}
  35. .xtiper_win.xon .xtiper_bg_white{background-color:rgba(255,255,255,.5);transition:50ms ease-in;}
  36. .xtiper_main{position:absolute;z-index:2;width:300px;background-color:#fff;box-shadow:0 0 10px rgba(0,0,0,.2);opacity:0;transition-timing-function:ease-in;transition-duration:.15s;transition-property:opacity,transform;transform:scale(0,0);}
  37. .xtiper_main.xapp{background-color:transparent;}
  38. .xtiper_main_photo{transition-property:opacity,transform,height,top;}
  39. .xtiper_main_photo.xon{transition-property:opacity,transform,height;}
  40. .xtiper_win.xon .xtiper_main{opacity:1;transform:scale(1,1);}
  41. .xtiper_win.xon .xtiper_bg,.xtiper_win.xon .xtiper_main{transition-timing-function:ease-in;transition-duration:.2s;}
  42. .xtiper_win.xoff .xtiper_bg{opacity:0;}
  43. .xtiper_win.xoff .xtiper_main{opacity:0;transform:scale(0,0);}
  44. .xtiper_tit{position:relative;padding:0 18px;height:40px;background-color:#f8f8f8;color:#222;font-size:14px;line-height:40px;cursor:move;user-select:none;}
  45. .xtiper_tit:after{position:absolute;bottom:0;left:0;display:block;width:100%;height:1px;background-color:#eee;content:"";}
  46. .xtiper_tit_none{height:8px;background-color:#f0f0f0;}
  47. .xtiper_tit.xminmax{cursor:default;}
  48. .xtiper_tit p{overflow:hidden;margin-right:28px;text-overflow:ellipsis;white-space:nowrap;}
  49. .xtiper_tit.xmcss1 p{margin-right:62px;}
  50. .xtiper_tit.xmcss2 p{margin-right:96px;}
  51. .xtiper_tit.xmin p{margin-right:62px;}
  52. .xtiper_minmax{position:absolute;top:5px;right:6px;}
  53. .xtiper_close{z-index:10;}
  54. .xtiper_close,.xtiper_max,.xtiper_min{position:relative;float:left;box-sizing:border-box;margin-right:4px;width:30px;height:30px;background-position:center center;background-size:18px;background-repeat:no-repeat;cursor:pointer;}
  55. .xtiper_minmax div:last-child{margin-right:0;}
  56. .xtiper_close:after,.xtiper_close:before{position:absolute;top:14px;left:8px;display:block;width:14px;height:2px;background-color:#2d2c3b;content:"";}
  57. .xtiper_close:before{transform:rotate(45deg);}
  58. .xtiper_close:after{transform:rotate(-45deg);}
  59. .xtiper_close:hover,.xtiper_max:hover,.xtiper_min:hover{opacity:.8;}
  60. .xtiper_close:after,.xtiper_close:before{transition-timing-function:ease-in;transition-duration:.2s;transition-property:transform;}
  61. .xtiper_close:hover:before{transform:rotate(135deg);}
  62. .xtiper_close:hover:after{transform:rotate(45deg);}
  63. .xtiper_close_notit{position:absolute;top:-10px;right:-10px;margin-right:0;border:3px solid #fff;border-radius:50%;background-color:#333;transition-timing-function:ease-in;transition-duration:.2s;transition-property:background-color;}
  64. .xtiper_close_notit:after,.xtiper_close_notit:before{top:11px;left:5px;background-color:#fff;}
  65. .xtiper_close_notit:hover{background-color:#2b84d0;opacity:1;}
  66. .xtiper_close_notitmin:after,.xtiper_close_notitmin:before{top:7px;left:3px;width:10px;}
  67. .xtiper_close_notitmin{width:20px;height:20px;border-width:2px;}
  68. .xtiper_close_photoapp{top:6px;right:6px;background-color:transparent;}
  69. .xtiper_close_photoapp:hover{background-color:transparent;}
  70. .xtiper_close_photoapp:hover:before{transform:rotate(45deg);}
  71. .xtiper_close_photoapp:hover:after{transform:rotate(-45deg);}
  72. .xtiper_close_load{position:absolute;top:0;right:0;}
  73. .xtiper_photo{position:relative;overflow:hidden;transition-property:transform,opacity;}
  74. .xtiper_photo_ul{padding:0 60px;height:100%;}
  75. .xtiper_photo_ul ul{position:relative;overflow:hidden;height:calc(100% - 26px);}
  76. .xtiper_photo_li{position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;opacity:0;transition-timing-function:ease-out;transition-duration:.3s;transition-property:transform,opacity;transform:scale(0,0);}
  77. .xtiper_photo_li.xon{opacity:1;transform:scale(1,1);}
  78. .xtiper_photo_li.xold_prev{transform:scale(1,1) translate(100%,0);}
  79. .xtiper_photo_li.xold_next{transform:scale(1,1) translate(-100%,0);}
  80. .xtiper_sheet{position:absolute;bottom:0;left:0;z-index:2;width:100%;background-color:#fff;transition:.1s ease-in;transition-property:transform;transform:translate(0,100%);}
  81. .xtiper_sheet_tit,.xtiper_sheet_ul{background-color:#efeff4;}
  82. .xtiper_win.xon .xtiper_sheet{transition:.2s ease-in;transform:translate(0,0);}
  83. .xtiper_win.xoff .xtiper_sheet{transform:translateY(100%);}
  84. .xtiper_sheet_left{text-align:left;}
  85. .xtiper_sheet_right{text-align:right;}
  86. .xtiper_sheet_center{text-align:center;}
  87. .xtiper_sheet_tit{padding:15px;color:#222;font-weight:700;font-size:15px;line-height:20px;}
  88. .xtiper_sheet_li{height:48px;border-top:1px solid #d9d9d9;background-color:#fff;color:#222;font-size:14px;line-height:48px;cursor:pointer;user-select:none;-ms-user-select:none;}
  89. .xtiper_sheet_li a{display:block;width:100%;color:#222;text-decoration:none;}
  90. .xtiper_sheet_li a:hover{color:#222;text-decoration:none;}
  91. .xtiper_sheet_li p{padding:0 15px;}
  92. .xtiper_sheet_li.xlast{margin-top:8px;border-top:0;}
  93. .xtiper_min{background-image:url("data:image/svg+xml,%3Csvg width='600' height='600' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M949.2 560.2H74.8c-26.6 0-48.2-21.6-48.2-48.2 0-26.6 21.6-48.2 48.2-48.2H949.2c26.6 0 48.2 21.6 48.2 48.2 0 26.6-21.6 48.2-48.2 48.2z' fill='%232d2c3b'/%3E%3C/svg%3E");}
  94. .xtiper_min.xon{margin-right:0;background-image:url("data:image/svg+xml,%3Csvg width='2000' height='2000' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M879.1 783.6h-60.4a34.3 34.3 0 0 1 0-68.6h60.4c14.3 0 26.6-11.8 26.6-26.6V142.6c0-14.3-11.8-26.6-26.6-26.6H332.8c-14.3 0-26.6 11.8-26.6 26.6v60.4a34.3 34.3 0 0 1-68.6 0V142.6c0-52.2 42.5-94.72 94.72-94.7h546.3c52.2 0 94.72 42.5 94.72 94.7v546.3c0.5 52.2-42.5 94.72-94.2 94.7z' fill='%232c2c2c'/%3E%3Cpath d='M708.1 964.3H162.3c-57.9 0-103.9-47.1-103.9-103.9V312.6c0-57.9 47.1-103.9 103.9-103.9h546.3c57.9 0 103.9 47.1 103.9 103.9v546.8c0.5 58.4-46.08 104.96-104.4 104.96zM162.3 276.72c-19.5 0-35.84 16.4-35.84 35.8v546.8c0 19.5 16.4 35.84 35.84 35.84h546.3c19.5 0 35.84-16.4 35.84-35.84V312.6c0-19.5-16.4-35.84-35.84-35.8H162.3z' fill='%232d2c3b'/%3E%3C/svg%3E");}
  95. .xtiper_max{background-image:url("data:image/svg+xml,%3Csvg width='600' height='600' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M944.0 0.8H79.1C35.8 0.8 0.3 36.2 0.3 79.4v864.5c0 43.2 35.4 78.6 78.7 78.6h865.9c43.3 0 78.7-35.4 78.7-78.6V79.4C1023.7 36.2 988.3 0.8 944.0 0.8z m0 943.1H79.1V79.4h865.9v864.5z m0 0' fill='%23231814'/%3E%3Cpath d='M342.8 735.7l137.8-137.5c15.7-15.7 15.7-39.3 0-55.0-15.7-15.7-39.4-15.7-55.1 0l-137.8 137.5-90.5-90.4V826.0h236.2l-90.5-90.4z m228.3-243.6c11.8 0 19.7-3.9 27.6-11.8l137.8-137.5 90.5 90.4V197.3H590.7l90.5 90.4-137.8 137.5c-15.7 15.7-15.7 39.3 0 55.0 7.9 7.9 19.7 11.8 27.5 11.8z m0 0' fill='%232d2c3b'/%3E%3C/svg%3E");}
  96. .xtiper_max.xon{background-image:url("data:image/svg+xml,%3Csvg width='600' height='600' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M944.0 0.8H79.1C35.8 0.8 0.3 36.2 0.3 79.4v864.5c0 43.2 35.4 78.6 78.7 78.6h865.9c43.3 0 78.7-35.4 78.7-78.6V79.4C1023.7 36.2 988.3 0.8 944.0 0.8z m0 943.1H79.1V79.4h865.9v864.5z m0 0' fill='%23231814'/%3E%3Cpath d='M346.7 621.7l-137.8 137.5c-15.7 15.7-15.7 39.3 0 55.0 15.7 15.7 39.4 15.7 55.1 0l137.8-137.5 90.5 90.4V531.3H256.2l90.5 90.4zM787.5 197.3c-11.8 0-19.7 3.9-27.6 11.8l-137.8 137.5-90.5-90.4v235.8h236.2l-90.5-90.4 137.8-137.5c15.7-15.7 15.7-39.3 0-55.0-7.9-7.9-19.7-11.8-27.5-11.8z' fill='%232d2c3b'/%3E%3C/svg%3E");}
  97. .xtiper_times{color:#e85445;}
  98. .xtiper_pad{padding:15px;}
  99. .xtiper_tip{overflow:hidden;min-height:60px;font-size:14px;line-height:20px;}
  100. .xtiper_btn ul{display:flex;overflow:hidden;border-top:1px solid #eaeaea;background-color:#fff;text-align:center;}
  101. .xtiper_btn ul:after{clear:both;display:block;content:"";}
  102. .xtiper_btn li{position:relative;float:left;overflow:hidden;}
  103. .xtiper_btn li:after{position:absolute;top:0;right:0;display:block;overflow:hidden;width:1px;height:40px;background-color:#eaeaea;content:"";}
  104. .xtiper_btn li.xactive:after{background-color:rgba(255,255,255,.2);}
  105. .xtiper_btn1 li{float:none;width:100%;}
  106. .xtiper_btn2 li{width:50%;}
  107. .xtiper_btn3 li{width:33.3%;-webkit-box-flex:1;-ms-flex:1;flex:1;}
  108. .xtiper_btn4 li{width:25%;-webkit-box-flex:1;-ms-flex:1;flex:1;}
  109. .xtiper_btn li button{width:100%;height:40px;border:0;background-color:#fff;color:#222;font-size:14px;cursor:pointer;}
  110. .xtiper_btn li.xactive button{color:#fff;}
  111. .xtiper_btn li.xactive button{background-color:#a8a8a8;}
  112. .xtiper_btn_hello .xtiper_btnbor,.xtiper_btn_hello li.xactive button,.xtiper_btn_success .xtiper_btnbor,.xtiper_btn_success li.xactive button{background-color:#37b72c;}
  113. .xtiper_btn_error .xtiper_btnbor,.xtiper_btn_error li.xactive button{background-color:#e75445;}
  114. .xtiper_btn_ask .xtiper_btnbor,.xtiper_btn_ask li.xactive button,.xtiper_btn_warning .xtiper_btnbor,.xtiper_btn_warning li.xactive button{background-color:#f89310;}
  115. .xtiper_btn1 li.xactive button{background-color:#fff;color:#222;}
  116. .xtiper_btn li:last-child:after{display:none;}
  117. .xtiper_btn li button:hover{opacity:.9;}
  118. .xtiper_btnbor{position:relative;overflow:hidden;width:100%;height:4px;background-color:#c3c3c3;}
  119. .xtiper_btnbor:after{position:absolute;top:0;left:0;display:block;width:100%;height:4px;background-color:rgba(0,0,0,.1);content:"";}
  120. .xtiper_btn1 .xtiper_btnbor:after{display:none;}
  121. .xtiper_btn2 li:nth-child(2){opacity:.92;}
  122. .xtiper_btn3 li:nth-child(1){opacity:.84;}
  123. .xtiper_btn3 li:nth-child(2){opacity:.92;}
  124. .xtiper_btn4 li:nth-child(1){opacity:.76;}
  125. .xtiper_btn4 li:nth-child(2){opacity:.84;}
  126. .xtiper_btn4 li:nth-child(3){opacity:.92;}
  127. .xtiper_pr{position:relative;}
  128. .xtiper_content{position:relative;overflow:auto;height:100%;}
  129. .xtiper_content.xtit{height:calc(100% - 40px);}
  130. .xtiper_content.xmin{height:calc(100% - 8px);}
  131. .xtiper_over{overflow:hidden;}
  132. .xtiper_content .zw{position:absolute;top:0;left:0;display:none;overflow:hidden;width:100%;height:100%;}
  133. .xtiper_main.xon .xtiper_content .zw{display:block;}
  134. .xtiper_con{padding-top:8px;padding-bottom:12px;}
  135. .xtiper_con_icon{padding-left:42px;}
  136. .xtiper_conin{overflow-x:hidden;overflow-y:auto;max-height:400px;}
  137. .xtiper_conin::-webkit-scrollbar{width:5px;}
  138. .xtiper_conin::-webkit-scrollbar-track{border-radius:3px;background-color:#f1f1f1;}
  139. .xtiper_conin::-webkit-scrollbar-thumb{border-radius:3px;background-color:#c1c1c1;}
  140. .xtiper_loadin{position:absolute;top:50%;left:50%;z-index:2;display:block;margin-top:-17px;margin-left:-17px;width:34px;height:34px;opacity:0;transition:.1s ease-in;transition-property:opacity;}
  141. .xtiper_loadin span{position:absolute;top:36px;left:50%;margin-left:-140px;width:280px;height:24px;color:#222;text-align:center;white-space:nowrap;font-size:14px;line-height:24px;}
  142. .xtiper_win.xon .xtiper_loadin{opacity:1;transition:.2s ease-in;}
  143. .xtiper_icon{position:absolute;top:0;left:0;display:inline-block;width:34px;height:34px;background-size:100% 100%;background-repeat:no-repeat;vertical-align:middle;}
  144. .xtiper_icon img{width:34px;height:34px;}
  145. .xtiper_icon_min{position:static;top:auto;left:auto;margin-right:5px;width:20px;height:20px;transform:translateY(-1px);}
  146. .xtiper_icon_min img{width:20px;height:20px;}
  147. .xtiper_icon_success{background-image:url("data:image/svg+xml,%3Csvg width='600' height='600' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M512.7 0.1C230.4 0.1 0.8 229.8 0.8 512.1c0 282.3 229.6 511.9 511.0 511.9 282.3 0 511.9-229.6 511.9-511.9C1024.6 229.8 795.0 0.1 512.7 0.1z m0 950.5c-241.8 0-438.5-196.7-438.5-438.5 0-241.8 196.7-438.5 438.5-438.5 241.7 0 438.5 196.6 438.5 438.5-0.0 241.7-196.8 438.5-438.5 438.5z' fill='%2337b72c'/%3E%3Cpath d='M754.8 337.0L470.1 630.1l-178.5-155.2c-15.8-13.7-39.7-12.0-53.4 3.7-13.7 15.8-12.0 39.7 3.7 53.4l205.2 178.4a37.7 37.7 0 0 0 10.9 6.7 37.8 37.8 0 0 0 15.9 2.7 37.9 37.9 0 0 0 15.2-3.0c0.0-0.0 0.0 0.0 0.0-0.0a37.7 37.7 0 0 0 10.4-7.7l309.4-317.5c14.6-14.0 14.3-38.9-0.7-53.5-14.0-14.6-38.9-14.3-53.5 0.7z' fill='%2337b72c'/%3E%3C/svg%3E");}
  148. .xtiper_icon_error{background-image:url("data:image/svg+xml,%3Csvg width='600' height='600' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M512.7 1023.0C230.4 1023.0 0.7 794.4 0.7 512.1 0.8 229.8 230.4 0.1 512.7 0.1c282.3 0 511.9 229.6 511.9 511.0 0 282.2-229.6 511.9-511.9 511.9z m0-950.4c-241.8 0-438.5 196.6-438.5 438.5 0 241.7 196.7 438.5 438.5 438.5 241.7 0 438.5-196.7 438.5-438.5 0-241.8-196.8-438.5-438.5-438.5z m51.4 439.0l158.1-156.3c14.4-14.2 14.5-37.4 0.3-51.7-14.2-15.4-37.4-14.5-52.6-0.3l-157.4 156.5-155.9-156.4c-15.3-15.2-37.4-14.3-51.7 0-14.3 14.2-14.3 37.4 0 51.7l155.7 156.1-157.0 155.3c-14.4 14.2-14.5 37.3-0.3 51.7 7.2 7.2 16.6 10.9 25.0 10.9 9.3 0 18.6-3.6 25.8-10.6l157.2-155.5 158.4 159.0c7.2 6.2 16.6 10.7 25.0 10.7 9.3 0 18.7-4.5 25.8-10.6 14.3-14.3 14.4-37.4 0.1-51.7l-158.3-158.8z' fill='%23e75445'/%3E%3C/svg%3E");}
  149. .xtiper_icon_warning{background-image:url("data:image/svg+xml,%3Csvg width='600' height='600' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M512.7 0.1C230.4 0.1 0.8 229.8 0.8 512.1c0 282.3 229.6 511.9 511.0 511.9 282.3 0 511.9-229.6 511.9-511.9C1024.6 229.8 795.0 0.1 512.7 0.1z m0 950.5c-241.8 0-438.5-196.7-438.5-438.5 0-241.8 196.7-438.5 438.5-438.5 241.7 0 438.5 196.6 438.5 438.5 0 241.7-196.8 438.5-438.5 438.5z' fill='%23f89310'/%3E%3Cpath d='M511.6 681.4c-15.5 0-28.6 5.4-39.4 16.1s-16.1 23.7-16.1 38.0c0 17.5 5.6 31.1 16.8 40.8 11.2 9.7 24.3 14.6 39.4 14.6 14.8 0 27.7-4.9 38.8-14.8 11.1-9.9 16.6-23.4 16.6-40.6 0-15.3-5.5-28.3-16.4-38.0-10.0-10.7-24.2-16.1-39.7-16.1zM514.5 232.4c-17.5 0-31.6 5.7-42.3 17.2s-16.1 27.4-16.1 47.9c0 15.0 1.1 39.8 3.3 74.3l11.8 177.0c2.2 22.9 5.9 39.0 11.1 51.2 5.2 11.2 14.4 16.8 27.7 16.8 13.1 0 22.4-5.8 28.1-17.4 5.7-11.6 9.4-28.2 11.1-49.9l15.9-182.2c1.7-16.7 2.6-33.3 2.6-49.5 0-27.6-3.6-48.7-10.7-63.4-7.2-14.7-21.3-21.0-42.5-21.0z' fill='%23f89310'/%3E%3C/svg%3E");}
  150. .xtiper_icon_ask{background-image:url("data:image/svg+xml,%3Csvg width='600' height='600' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M512.7 0.1C230.4 0.1 0.8 229.8 0.8 512.1c0 282.3 229.6 511.9 511.0 511.9 282.3 0 511.9-229.6 511.9-511.9C1024.6 229.8 795.0 0.1 512.7 0.1z m0 950.5c-241.8 0-438.5-196.7-438.5-438.5 0-241.8 196.7-438.5 438.5-438.5 241.7 0 438.5 196.6 438.5 438.5 0 241.7-196.8 438.5-438.5 438.5z' fill='%23f89310'/%3E%3Cpath d='M513.9 681.3c-15.8 0-29.1 5.3-39.9 15.9-10.8 10.6-16.3 23.7-16.3 39.2 0 17.5 5.6 31.1 16.8 40.8 11.2 9.7 24.3 14.6 39.4 14.6 14.5 0 27.3-4.9 38.4-14.8 11.1-9.9 16.6-23.4 16.6-40.6 0-15.5-5.3-28.6-15.9-39.2-10.6-10.6-23.7-15.9-39.2-15.9zM617.4 252.0c-27.3-13.2-58.9-19.8-94.6-19.8-38.4 0-72.1 7.9-100.9 23.7-28.8 15.8-50.8 35.7-65.8 59.7-15.0 24.0-22.5 47.7-22.5 71.1 0 11.3 4.7 21.9 14.2 31.6 9.5 9.7 21.1 14.6 34.9 14.6 23.4 0 39.3-13.9 47.7-41.8 8.9-26.6 19.7-46.7 32.5-60.4 12.8-13.7 32.8-20.5 59.9-20.5 23.2 0 42.1 6.8 56.7 20.3 14.7 13.6 21.0 30.2 21.0 49.9 0 10.1-2.4 19.5-7.2 28.1-4.8 8.6-10.7 16.4-17.7 23.5s-18.4 17.4-34.2 31.2c-17.0 15.8-32.3 29.4-42.9 40.8-10.6 11.5-19.1 24.8-25.5 39.9-6.4 15.2-9.6 33.1-9.6 53.8 0 16.5 4.4 28.0 13.1 37.3 8.7 8.4 19.5 12.6 32.3 12.6 24.6 0 39.3-12.8 43.0-38.4 2.7-12.1 4.7-20.5 6.1-25.3 1.4-4.8 3.3-9.6 5.7-14.4 2.5-4.8 6.2-10.1 11.3-15.9 5.0-5.8 11.8-12.5 20.1-20.1 30.3-27.1 51.3-46.4 63.0-57.8 11.7-11.5 21.8-25.1 30.3-40.8 8.5-15.8 12.7-34.1 12.7-55.1 0-26.6-7.5-51.2-22.4-73.9-14.9-22.7-36.0-40.6-63.4-53.8z' fill='%23f89310'/%3E%3C/svg%3E");}
  151. .xtiper_icon_hello{background-image:url("data:image/svg+xml,%3Csvg width='600' height='600' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M512.7 0.1C230.4 0.1 0.8 229.8 0.8 512.1c0 282.3 229.6 511.9 511.0 511.9 282.3 0 511.9-229.6 511.9-511.9C1024.6 229.8 795.0 0.1 512.7 0.1z m0 950.5c-241.8 0-438.5-196.7-438.5-438.5 0-241.8 196.7-438.5 438.5-438.5 241.7 0 438.5 196.6 438.5 438.5-0.0 241.7-196.8 438.5-438.5 438.5z' fill='%2337b72c'/%3E%3Cpath d='M355.5 478.0c9.8-9.7 15.2-22.5 15.2-36.2v-72.1c0-27.0-22.8-50.8-50.7-50.8-28.0 0-50.8 22.8-50.8 50.8v72.1c0 27.0 22.8 50.8 50.8 50.8 13.3 0 25.9-5.1 35.5-14.6zM706.5 615.4c-13.7-11.8-37.6-8.9-49.4 4.9-41.6 46.3-84.9 65.0-145.1 65.0-62.8 0-100.7-17.2-144.8-65.7-12.2-14.2-35.0-17.0-49.7-5.2-15.1 13.1-17.4 35.3-5.0 49.9 59.1 66.8 114.9 92.8 199.5 92.8 82.0 0 145.4-29.5 199.6-92.9 12.1-13.0 9.8-36.7-5.1-49.6zM704.0 319.8c-28.0 0-50.7 22.8-50.7 50.8v72.1c0 28.1 22.8 50.8 50.7 50.8 28.0 0 50.7-22.8 50.7-50.8v-72.1c0-27.0-22.8-50.8-50.7-50.8z' fill='%2337b72c'/%3E%3C/svg%3E");}
  152. .xtiper_icon_load{background-image:url("data:image/svg+xml,%3Csvg width='600' height='600' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M979.73 513.01c-0.96-1.70-2.66-2.65-4.46-2.65h-69.90c0-84.45-26.02-162.63-70.11-227.32-0.53-0.85-0.95-1.91-1.52-2.76-4.57-6.59-9.67-11.69-14.55-19.02-1.81-2.37-3.51-4.78-5.42-7.12-7.22-8.92-14.87-17.20-22.73-25.38-0.74-0.85-1.49-1.59-2.23-2.34-25.50-26.88-56.41-49.50-89.13-67.56-0.83-0.53-1.70 0-2.55-1.49-9.35-5.10-19.02-9.77-28.89-14.13-2.44 0-4.78-2.23-7.22-3.29-8.39-3.51-15.94-6.59-25.6-8.50-4.15-1.38-8.18-2.86-12.32-4.15-7.54-2.23-15.30-4.16-23.05-6.05-5.21-1.17-10.31-2.55-15.62-3.51-2.12-0.42-3.18-1.17-6.37-1.49-7.33-1.28-14.77-2.02-22.10-2.98-2.65-0.30-4.25-0.74-7.91 0-13.28-1.27-26.45-2.23-39.63-2.23-80.51 0-159.12 24.96-226.58 72.76-21.46 15.30-26.77 45.25-11.68 67.02 15.09 21.78 44.72 27.09 66.28 11.79l3.31-0.71c52.37-36.11 112.60-55.77 176.33-54.92a329.67 329.67 0 0 1 24.64 1.24c3.29 0.32 6.59 0.85 9.99 1.27 6.37 0.85 12.75 1.70 18.00 2.97 3.83 0.75 7.65 1.70 11.37 2.66 6.16 1.48 12.20 2.92 18.16 4.68 2.87 0.85 5.64 1.91 8.50 2.86 6.90 2.34 13.70 4.78 20.39 7.54 1.49 0.64 2.98 1.38 4.46 2.02 7.86 3.47 15.51 7.11 22.94 11.15 0.32 0.21 0.64 0.32 0 0.53 25.18 14.02 48.23 31.55 68.52 51.95 0.32 0.32 0.63 0.74 0.96 0 6.27 5.31 12.32 13.06 17.95 19.97 1.17 1.48 2.34 3.08 3.51 4.56 41.22 52.16 66.07 118.12 66.07 189.93h-69.89c-1.81 0-3.51 0.96-4.46 2.65-0.96 1.70-0.74 3.72 0.21 5.21l117.38 178.24c0.96 1.38 2.44 2.33 3.19 2.33 1.70 0 3.29-0.95 3.19-2.33l117.38-178.24c0.96-1.52 1.17-3.51 0.21-5.21zM687.56 761.37l-3.30 0.71c-52.37 36.11-112.60 55.77-176.33 54.92a329.29 329.29 0 0 1-24.64-1.25c-3.29-0.32-6.59-0.85-9.99-1.27-6.37-0.85-12.75-1.70-19.00-2.97-3.83-0.74-7.65-1.70-11.36-2.66-6.17-1.48-12.20-2.92-18.16-4.67-2.87-0.85-5.64-1.91-8.50-2.87-6.90-2.33-13.70-4.78-20.39-7.54-1.49-0.64-2.98-1.38-4.46-2.02-7.86-3.47-15.51-7.11-22.94-11.15-0.32-0.21-0.64-0.32 0-0.53-25.18-14.02-48.22-31.55-68.52-51.95-0.32-0.32-0.63-0.74-0.95 0-6.27-5.31-12.32-13.06-17.95-19.97-1.17-1.49-2.35-3.08-3.51-4.56-41.21-52.16-66.07-118.12-66.07-189.93h69.89c1.81 0 3.51-0.96 4.46-2.65 0.96-1.70 0.74-3.72-0.21-5.21L168.24 327.54c-0.96-1.38-2.45-2.34-3.19-2.34-1.70 0-3.29 0.95-3.19 2.34L44.48 505.79c-0.95 1.52-1.17 3.50-0.22 5.21 0.96 1.70 2.66 2.65 4.46 2.65h69.90c0 84.45 26.02 162.63 70.11 227.32 0.53 0.85 0.95 1.91 1.52 2.76 4.57 6.59 9.67 11.69 14.55 19.02 1.81 2.37 3.51 4.78 5.42 7.12 7.22 8.92 14.87 17.20 22.73 25.38 0.74 0.85 1.49 1.59 2.23 2.34 25.50 26.87 56.41 49.50 89.13 67.55 0.83 0.53 1.70 0 2.55 1.49 9.35 5.10 19.02 9.77 28.90 14.13 2.44 0 4.78 2.23 7.22 3.29 8.39 3.51 15.94 6.59 25.60 8.50 4.14 1.38 8.18 2.87 12.32 4.15 7.54 2.23 15.30 4.16 23.05 6.05 5.21 1.17 10.30 2.55 15.62 3.50 2.12 0.42 3.19 1.17 6.37 1.49 7.33 1.28 14.77 2.02 22.10 2.97 2.66 0.30 4.25 0.75 7.91 0 13.28 1.28 26.45 2.23 39.63 2.23 80.51 0 159.12-24.96 226.58-72.76 21.45-15.30 26.77-45.26 11.68-67.02-15.08-21.78-44.72-27.09-66.28-11.79z' fill='%23333333'/%3E%3C/svg%3E");}
  153. .xtiper_icon_load{animation:revolve 1.5s infinite linear;-webkit-animation:revolve 1.5s infinite linear;}
  154. @keyframes revolve{0%{transform:rotate(0);}
  155. 100%{transform:rotate(360deg);}
  156. }
  157. @media (max-width:760px){.xtiper_msg{max-width:80%;}
  158. }
  159. @media (max-width:480px){.xtiper_msg{max-width:300px;}
  160. .xtiper_photo_ul{padding:0;}
  161. .xtiper_photo_btn{display:none;}
  162. }
  163. .xtiper_photo_li p{position:absolute;top:50%;width:100%;max-height:100%;min-height:100px;background-color:#fff;background-position:center center;background-size:contain;background-repeat:no-repeat;transform:translate(0,-50%);}
  164. .xtiper_photo_li a{position:relative;z-index:2;display:block;width:100%;height:100%;}
  165. .xtiper_photo_load{position:absolute;top:50%;left:50%;z-index:1;margin-top:-17px;margin-left:-17px;}
  166. .xtiper_photo_li img{visibility:hidden;max-width:100%;}
  167. .xtiper_photo_li.xapp img{position:relative;z-index:2;visibility:visible;width:100%;}
  168. .xtiper_photo_btn{position:absolute;top:50%;z-index:2;overflow:hidden;width:32px;height:46px;cursor:pointer;transform:translate(0,-50%);}
  169. .xtiper_photo_prev{left:16px;}
  170. .xtiper_photo_next{right:16px;}
  171. .xtiper_photo_btn:after,.xtiper_photo_btn:before{position:absolute;z-index:1;display:block;width:26px;height:4px;border-radius:4px;background-color:#666;content:"";}
  172. .xtiper_photo_btn:hover{opacity:.7;}
  173. .xtiper_photo_prev:before{top:13px;left:3px;transform:rotate(-45deg);}
  174. .xtiper_photo_prev:after{top:29px;left:3px;transform:rotate(45deg);}
  175. .xtiper_photo_next:before{top:13px;right:3px;transform:rotate(45deg);}
  176. .xtiper_photo_next:after{top:29px;right:3px;transform:rotate(-45deg);}
  177. .xtiper_photo_num{position:absolute;bottom:5px;left:50%;z-index:10;overflow:hidden;height:26px;text-align:center;font-size:13px;line-height:26px;transform:translate(-50%,0);user-select:none;-ms-user-select:none;}
  178. .xtiper_nummax{padding-left:8px;}
  179. .xtiper_nummax,.xtiper_photo_num{display:none;}
  180. .xtiper_nummax.xon,.xtiper_photo_num.xon{display:inline-block;}
  181. `;
  182. let cssResourceNode = document.createElement("style");
  183. cssResourceNode.setAttribute("type", "text/css");
  184. cssResourceNode.setAttribute("data-insert-from", "xtiper");
  185. cssResourceNode.innerHTML = cssResource;
  186. if (document.head) {
  187. document.head.append(cssResourceNode);
  188. } else if (document.documentElement) {
  189. if (document.documentElement.childNodes.length === 0) {
  190. document.documentElement.appendChild(cssResourceNode);
  191. } else {
  192. document.documentElement.insertBefore(
  193. cssResourceNode,
  194. document.documentElement.childNodes[
  195. document.documentElement.childNodes.length - 1
  196. ]
  197. );
  198. }
  199. } else {
  200. throw new Error("未找到可以插入到页面中的元素");
  201. }
  202. })();
  203.  
  204. /*
  205. * author: ovsexia
  206. * version: 2.7.1
  207. * name: Xtiper
  208. * describe: 弹层弹窗解决方案
  209. * License: Mozilla Public License Version 2.0
  210. */
  211.  
  212. (function (global, factory) {
  213. /**
  214. * 不使用define
  215. * typeof define === "function" && define.amd
  216. * define(factory)
  217. */
  218. if (typeof exports === "object" && typeof module !== "undefined") {
  219. /* 适用于NodeJs或typeScript */
  220. module.exports = factory();
  221. } else {
  222. global = typeof globalThis !== "undefined" ? globalThis : global || self;
  223. /* 适用于浏览器中,且this对象是window,如果this是其它,那么会在其它对象下注册(不可用)对象 */
  224. global.xtip = factory(global.xtip);
  225. }
  226. })(typeof window !== "undefined" ? window : this, function (AnotherXtip) {
  227. let xtip = {};
  228. xtip.ver = "2.7.1";
  229. xtip.msg = function (tip, config) {
  230. if (!tip) {
  231. return false;
  232. }
  233. config = config || {};
  234. let o = {};
  235. o.model = "msg";
  236. o.tip = tip;
  237. o.times = config.times || 2;
  238. o.type = config.type || "black";
  239. o.pos = config.pos || "middle";
  240. o.icon = config.icon || "";
  241. o.zindex = config.zindex || 99999;
  242.  
  243. return this.run(o);
  244. };
  245. xtip.danmu = function (tip, config) {
  246. if (!tip) {
  247. return false;
  248. }
  249. config = config || {};
  250. let o = {};
  251. o.model = "danmu";
  252. o.tip = tip;
  253. o.type = config.type || "black";
  254. o.icon = config.icon || "";
  255. o.light = config.light != null ? config.light : false;
  256. o.zindex = config.zindex || 99999;
  257.  
  258. return this.run(o);
  259. };
  260. xtip.tips = function (tip, element, config) {
  261. if (!tip || !element) {
  262. return false;
  263. }
  264. config = config || {};
  265. let o = {};
  266. o.model = "tips";
  267. o.tip = tip;
  268. if (typeof element == "string") {
  269. let fir = element.substr(0, 1);
  270. if (fir == "#") {
  271. element = element.substr(1, element.length);
  272. }
  273. }
  274. o.element = element;
  275. o.bgcolor = config.bgcolor || "#000000";
  276. if (config.color) {
  277. o.color = config.color;
  278. } else {
  279. let reg = /rgba\((255\,){3}[0-9.]+/;
  280. let rgba = reg.test(o.bgcolor);
  281. if (
  282. o.bgcolor == "#fff" ||
  283. o.bgcolor == "#ffffff" ||
  284. o.bgcolor == "white" ||
  285. o.bgcolor == "rgb(255, 255, 255)" ||
  286. o.bgcolor == "rgba(255, 255, 255)" ||
  287. rgba === true
  288. ) {
  289. o.color = "#333333";
  290. } else {
  291. o.color = "#ffffff";
  292. }
  293. }
  294. o.times = config.times || 2;
  295. o.pos = config.pos || "right";
  296. o.closeBtn = config.closeBtn || false;
  297. o.zindex = config.zindex || 99999;
  298.  
  299. return this.run(o);
  300. };
  301. xtip.alert = function (tip, config) {
  302. config = config || {};
  303. let o = {};
  304. o.type = "alert";
  305. o.tip = tip || "";
  306. o.icon = config.icon || "";
  307. o.title = config.title || "提示";
  308. if (config.btn) {
  309. o.btn = typeof config.btn == "string" ? [config.btn] : [config.btn[0]];
  310. } else {
  311. o.btn = ["确定"];
  312. }
  313. o.btn1 = config.btn1 != null ? config.btn1 : null;
  314. o.btnbg = [];
  315. o.times = config.times || 0;
  316. o.shade = config.shade != null ? config.shade : true;
  317. if (o.shade === true) {
  318. o.shadeClose = config.shadeClose != null ? config.shadeClose : true;
  319. } else {
  320. o.shadeClose = false;
  321. }
  322.  
  323. return this.win(o);
  324. };
  325. xtip.confirm = function (tip, config) {
  326. config = config || {};
  327. let o = {};
  328. o.type = "confirm";
  329. o.tip = tip || "";
  330. o.icon = config.icon || "warning";
  331. o.title = config.title || "警告";
  332. o.btn = config.btn || ["确定", "取消"];
  333. if (o.btn && o.btn.length > 2) {
  334. let newbtn = [];
  335. for (let i = 0; i < 2; i++) {
  336. newbtn.push(o.btn[i]);
  337. }
  338. o.btn = newbtn;
  339. }
  340. o.btn1 = config.btn1 != null ? config.btn1 : null;
  341. o.btn2 = config.btn2 != null ? config.btn2 : null;
  342. o.btnbg = [true, false];
  343. o.shade = config.shade != null ? config.shade : true;
  344. if (o.shade === true) {
  345. o.shadeClose = config.shadeClose != null ? config.shadeClose : true;
  346. } else {
  347. o.shadeClose = false;
  348. }
  349.  
  350. return this.win(o);
  351. };
  352. xtip.win = function (config) {
  353. if (!config) {
  354. return false;
  355. }
  356. let o = {};
  357. o.model = "win";
  358. o.tip = config.tip || "";
  359. o.times = config.times || 0;
  360. o.type = config.type || "confirm";
  361. o.icon = config.icon || "";
  362. o.title = config.title || "提示";
  363. o.shade = config.shade != null ? config.shade : true;
  364. if (o.shade === true) {
  365. o.shadeClose = config.shadeClose != null ? config.shadeClose : true;
  366. } else {
  367. o.shadeClose = false;
  368. }
  369. o.lock = config.lock || false;
  370. o.btn = config.btn || null;
  371. if (o.btn && o.btn.length > 4) {
  372. let newbtn = [];
  373. for (let i = 0; i < 4; i++) {
  374. newbtn.push(o.btn[i]);
  375. }
  376. o.btn = newbtn;
  377. }
  378. o.btn1 = config.btn1 != null ? config.btn1 : null;
  379. o.btn2 = config.btn2 != null ? config.btn2 : null;
  380. o.btn3 = config.btn3 != null ? config.btn3 : null;
  381. o.btn4 = config.btn4 != null ? config.btn4 : null;
  382. o.btnbg = config.btnbg || [];
  383. o.width = config.width || "";
  384. o.maxWidth = config.maxWidth || "";
  385. o.end = typeof config.end == "function" ? config.end : null;
  386. o.min = config.min != null ? config.min : false;
  387. o.move = true;
  388. o.app = false;
  389. o.zindex = config.zindex || 99999;
  390. o.success = config.success || null;
  391.  
  392. return this.run(o);
  393. };
  394. xtip.photo = function (content, config) {
  395. if (!content) {
  396. return false;
  397. }
  398. config = config || {};
  399. let o = {};
  400. o.type = "photo";
  401. o.title = config.title || "";
  402. o.autoHeight = config.height ? false : true;
  403. o.width = config.width || "600px";
  404. o.height = config.height || "400px";
  405. o.content = content;
  406. o.app = config.app != null ? config.app : false;
  407. o.lock = true;
  408. o.reset = true;
  409. o.index = config.index || 1;
  410. o.iftitle = config.iftitle != null ? config.iftitle : true;
  411. o.iforder = config.iforder != null ? config.iforder : true;
  412.  
  413. return this.open(o);
  414. };
  415. xtip.photoApp = function (content, config) {
  416. if (!content) {
  417. return false;
  418. }
  419. config = config || {};
  420. let o = {};
  421. o.type = "photo";
  422. o.width = "100%";
  423. o.height = "100%";
  424. o.bgcolor = "rgba(0, 0, 0, 1)";
  425. o.title = false;
  426. o.move = false;
  427. o.shade = true;
  428. o.shadeClose = false;
  429. o.closeBtn = true;
  430. o.content = content;
  431. o.photoapp = true;
  432. o.lock = true;
  433. o.reset = true;
  434. o.index = config.index || 1;
  435. o.iftitle = config.iftitle != null ? config.iftitle : true;
  436. o.iforder = config.iforder != null ? config.iforder : true;
  437.  
  438. return this.open(o);
  439. };
  440. xtip.open = function (config) {
  441. if (!config == null || !config.type || !config.content) {
  442. return false;
  443. }
  444. let o = {};
  445. o.model = "open";
  446. o.type = config.type;
  447. o.content = config.content;
  448. o.id = config.id || "";
  449. o.title = config.title || "";
  450. if (config.autoHeight) {
  451. o.autoHeight = config.autoHeight;
  452. } else {
  453. o.autoHeight = config.height ? false : true;
  454. }
  455. o.width = config.width || "600px";
  456. o.height = config.height || "400px";
  457. o.maxWidth = config.maxWidth || "";
  458. o.maxHeight = config.maxHeight || "";
  459. o.x = config.x || "";
  460. o.y = config.y || "";
  461. o.x = sizef(o.x);
  462. o.y = sizef(o.y);
  463. function sizef(str) {
  464. if (str) {
  465. if (!isNaN(str)) {
  466. return Number(str);
  467. } else {
  468. let reg = /\-?[0-9\.]*(px|%)*/,
  469. match,
  470. num;
  471. if (str) {
  472. match = str.match(reg);
  473. if (!match[1] || (match[1] && match[1] == "px")) {
  474. match[0] = match[0].replace(/px/g, "");
  475. num = Number(match[0]);
  476. } else {
  477. num = "";
  478. }
  479. return num;
  480. }
  481. }
  482. } else {
  483. return "";
  484. }
  485. }
  486.  
  487. o.bgcolor = config.bgcolor || "";
  488. let reg = /rgba\((0\,){3}[0-9.]+/;
  489. let rgba = reg.test(o.bgcolor);
  490. if (
  491. o.bgcolor == "#000" ||
  492. o.bgcolor == "#000000" ||
  493. o.bgcolor == "black" ||
  494. o.bgcolor == "rgb(0, 0, 0)" ||
  495. o.bgcolor == "rgba(0, 0, 0)" ||
  496. rgba === true
  497. ) {
  498. o.color = "#ffffff";
  499. } else {
  500. o.color = "";
  501. }
  502. o.shade = config.shade != null ? config.shade : true;
  503. if (o.shade === true) {
  504. o.shadeClose = config.shadeClose != null ? config.shadeClose : true;
  505. } else {
  506. o.shadeClose = false;
  507. }
  508. o.end = typeof config.end == "function" ? config.end : null;
  509. o.min = config.min != null ? config.min : false;
  510. o.max = config.max != null ? config.max : false;
  511. o.closeBtn = config.closeBtn != null ? config.closeBtn : true;
  512. o.move = config.move != null ? config.move : true;
  513. o.lock = config.lock != null ? config.lock : false;
  514. o.over = config.over != null ? config.over : true;
  515. o.index = config.index || 1;
  516. o.app = config.app != null ? config.app : false;
  517. if (o.app === true) {
  518. if (o.type == "photo") {
  519. return this.photoApp(o.content, o.index);
  520. } else {
  521. o.height = config.height || "";
  522. o.lock = true;
  523. o.shade = true;
  524. o.shadeClose = true;
  525. }
  526. }
  527. o.reset = config.reset != null ? config.reset : true;
  528. o.zindex = config.zindex || 99999;
  529. o.photoapp = config.photoapp || false;
  530. o.iftitle = config.iftitle != null ? config.iftitle : true;
  531. o.iforder = config.iforder != null ? config.iforder : true;
  532. o.success = config.success || null;
  533.  
  534. return this.run(o);
  535. };
  536. xtip.load = function (tip, config) {
  537. config = config || {};
  538. let o = {};
  539. o.model = "load";
  540. o.tip = tip || "";
  541. o.times = config.times || 0;
  542. o.lock = config.lock != null ? config.lock : false;
  543. o.zindex = config.zindex || 99999;
  544. o.closeBtn = config.closeBtn != null ? config.closeBtn : false;
  545.  
  546. return this.run(o);
  547. };
  548. xtip.sheet = function (config) {
  549. if (!config || !config.btn) {
  550. return false;
  551. }
  552. let o = {};
  553. o.model = "sheet";
  554. o.title = config.title || "";
  555. o.align = config.align || "center";
  556. let btn = new Array();
  557. for (let i = 0; i < 8; i++) {
  558. if (config.btn[i]) {
  559. btn[i] = config.btn[i];
  560. }
  561. }
  562. o.btn = btn;
  563. o.btn1 = config.btn1 || null;
  564. o.btn2 = config.btn2 || null;
  565. o.btn3 = config.btn3 || null;
  566. o.btn4 = config.btn4 || null;
  567. o.btn5 = config.btn5 || null;
  568. o.btn6 = config.btn6 || null;
  569. o.btn7 = config.btn7 || null;
  570. o.btn8 = config.btn8 || null;
  571.  
  572. o.force = config.force || "";
  573. o.btnClose = config.btnClose || "取消";
  574. o.lock = true;
  575. o.shadeClose = true;
  576. o.end = typeof config.end == "function" ? config.end : null;
  577. o.zindex = config.zindex || 99999;
  578.  
  579. return this.run(o);
  580. };
  581. //核心方法
  582. xtip.run = function (options) {
  583. let x = new Xclass(options);
  584. return x.mainid;
  585. };
  586. xtip.close = function (closeid) {
  587. let o = {};
  588. o.model = "close";
  589. o.closeid = closeid;
  590.  
  591. return this.run(o);
  592. };
  593. xtip.closeAll = function () {
  594. let o = {};
  595. o.model = "closeAll";
  596.  
  597. return this.run(o);
  598. };
  599. xtip.noConflict = function () {
  600. if (window.xtip) {
  601. delete window.xtip;
  602. }
  603. if (AnotherXtip) {
  604. window.xtip = AnotherXtip;
  605. }
  606. return xtip;
  607. };
  608. let Xclass = function (config) {
  609. let that = this;
  610.  
  611. //按钮失焦
  612. that.loseblur();
  613.  
  614. //客户端
  615. that.ifmob = /Android|webOS|iPhone|iPod|BlackBerry/i.test(
  616. navigator.userAgent
  617. );
  618.  
  619. //主id
  620. let rand = Math.random().toString().split(".")[1];
  621. let mainid = "xtiper_" + rand;
  622. that.mainid = mainid;
  623.  
  624. //参数配置
  625. config = that.namefix(config);
  626. that.c = config;
  627. let xcstr = "";
  628. if (
  629. typeof config.reset != "undefined" &&
  630. config.reset !== null &&
  631. config.reset === false
  632. ) {
  633. for (let key in config) {
  634. if (config[key] != null) {
  635. xcstr += config[key].toString();
  636. }
  637. }
  638. that.xcstr = that.xcstrRep(xcstr);
  639. } else {
  640. that.xcstr = xcstr;
  641. }
  642.  
  643. //关闭
  644. if (config.model == "close") {
  645. that.close(config.closeid);
  646. return false;
  647. }
  648.  
  649. //关闭
  650. if (config.model == "closeAll") {
  651. that.closeAll();
  652. return false;
  653. }
  654.  
  655. //入口
  656. that.creat();
  657. };
  658.  
  659. Xclass.pt = Xclass.prototype;
  660.  
  661. //让所有按钮失去焦点
  662. Xclass.pt.loseblur = function () {
  663. let button = document.getElementsByTagName("button");
  664. if (button.length > 0) {
  665. for (let i = 0; i < button.length; i++) {
  666. button[i].blur();
  667. }
  668. }
  669. let input = document.getElementsByTagName("input");
  670. if (input.length > 0) {
  671. for (let i = 0; i < input.length; i++) {
  672. let input_type = input[i].getAttribute("type");
  673. if (input_type && (input_type == "button" || input_type == "submit")) {
  674. input[i].blur();
  675. }
  676. }
  677. }
  678. };
  679.  
  680. Xclass.pt.creat = function () {
  681. let that = this;
  682. let c = that.c;
  683.  
  684. //1.构造内部html
  685. let html = that.html();
  686. if (!html) {
  687. return false;
  688. }
  689.  
  690. //2.输出html代码到body
  691. let body = document.body;
  692. let div = document.createElement("div");
  693. div.setAttribute("id", that.mainid);
  694. div.setAttribute("class", "xtiper");
  695. div.innerHTML = html;
  696. body.appendChild(div);
  697. let xtipdiv = document.getElementById(that.mainid);
  698. that.xtipdiv = xtipdiv;
  699.  
  700. //3.添加classname、属性
  701. that.attr();
  702.  
  703. //4.添加动画效果
  704. that.on();
  705.  
  706. //5.后续处理
  707. that.after();
  708. };
  709.  
  710. //参数名称补全
  711. Xclass.pt.namefix = function (c) {
  712. //方位
  713. if (c.pos) {
  714. c.pos = c.pos.toLowerCase();
  715. if (c.pos == "t") {
  716. c.pos = "top";
  717. } else if (c.pos == "b") {
  718. c.pos = "bottom";
  719. } else if (c.pos == "l") {
  720. c.pos = "left";
  721. } else if (c.pos == "r") {
  722. c.pos = "right";
  723. } else if (c.pos == "m") {
  724. c.pos = "middle";
  725. }
  726. }
  727.  
  728. //类型
  729. if (c.type) {
  730. c.type = c.type.toLowerCase();
  731. if (c.type == "r") {
  732. c.type = "ready";
  733. } else if (c.type == "n") {
  734. c.type = "noready";
  735. } else if (c.type == "notready") {
  736. c.type = "noready";
  737. } else if (c.type == "u") {
  738. c.type = "url";
  739. } else if (c.type == "h") {
  740. c.type = "html";
  741. } else if (c.type == "p") {
  742. c.type = "photo";
  743. } else if (c.type == "w") {
  744. c.type = "white";
  745. } else if (c.type == "b") {
  746. c.type = "black";
  747. } else if (c.type == "a") {
  748. c.type = "alert";
  749. } else if (c.type == "c") {
  750. c.type = "confirm";
  751. }
  752. }
  753.  
  754. c.iconColor = "";
  755. //图标
  756. if (c.icon) {
  757. if (typeof c.icon == "object") {
  758. c.iconColor = c.icon[1];
  759. c.icon = c.icon[0];
  760. }
  761. c.icon = c.icon.toLowerCase();
  762. c.iconFlag = true;
  763. if (c.icon == "s") {
  764. c.icon = "success";
  765. } else if (c.icon == "e") {
  766. c.icon = "error";
  767. } else if (c.icon == "w") {
  768. c.icon = "warning";
  769. } else if (c.icon == "a") {
  770. c.icon = "ask";
  771. } else if (c.icon == "h") {
  772. c.icon = "hello";
  773. }
  774. if (
  775. c.icon !== "success" &&
  776. c.icon !== "error" &&
  777. c.icon !== "warning" &&
  778. c.icon !== "ask" &&
  779. c.icon !== "hello"
  780. ) {
  781. c.iconFlag = false;
  782. }
  783. }
  784.  
  785. //文字对齐
  786. if (c.align) {
  787. c.align = c.align.toLowerCase();
  788. if (c.align == "l") {
  789. c.align = "left";
  790. } else if (c.align == "c") {
  791. c.align = "center";
  792. } else if (c.align == "r") {
  793. c.align = "right";
  794. }
  795. }
  796. return c;
  797. };
  798.  
  799. //构造内部html
  800. Xclass.pt.html = function () {
  801. let that = this;
  802. let c = that.c;
  803. let xtipdiv = that.xtipdiv;
  804.  
  805. let html = "";
  806. //短消息
  807. if (c.model == "msg") {
  808. html += "<p>";
  809. if (c.icon) {
  810. html +=
  811. c.iconFlag === true
  812. ? '<i class="xtiper_icon xtiper_icon_' +
  813. c.icon +
  814. ' xtiper_icon_min"></i>'
  815. : '<img class="xtiper_icon xtiper_icon_min" src="' +
  816. c.icon +
  817. '" />';
  818. }
  819. html += c.tip + "</p>";
  820. }
  821. //弹幕
  822. else if (c.model == "danmu") {
  823. let danmuli = document.getElementsByClassName("xtiper_danmu");
  824. if (danmuli.length > 300 || document.hidden) {
  825. return false;
  826. }
  827.  
  828. html += "<p>";
  829. if (c.icon) {
  830. html +=
  831. c.iconFlag === true
  832. ? '<i class="xtiper_icon xtiper_icon_' +
  833. c.icon +
  834. ' xtiper_icon_min"></i>'
  835. : '<img class="xtiper_icon xtiper_icon_min" src="' +
  836. c.icon +
  837. '" />';
  838. }
  839. html += c.tip + "</p>";
  840. }
  841. //气泡层
  842. else if (c.model == "tips") {
  843. that.newelement = document.getElementById(c.element) || c.element;
  844. if (c.bgcolor) {
  845. html +=
  846. '<p style="background-color:' +
  847. c.bgcolor +
  848. ";" +
  849. (c.color ? " color:" + c.color + ';"' : "") +
  850. '">' +
  851. c.tip +
  852. "</p>";
  853. } else {
  854. html += "<p>" + c.tip + "</p>";
  855. }
  856. html += '<em style="background-color:' + c.bgcolor + ';"></em>';
  857. if (c.closeBtn === true) {
  858. html +=
  859. '<div class="xtiper_close xtiper_close_notit xtiper_close_notitmin"></div>';
  860. }
  861. }
  862. //弹窗层
  863. else if (c.model == "win") {
  864. if (c.type == "alert") {
  865. c.btn = c.btn != null ? c.btn : ["确定"];
  866. c.btn1 = c.btn1 != null ? c.btn1 : null;
  867. c.btn2 = null;
  868. c.btn3 = null;
  869. c.btn4 = null;
  870. } else if (c.type == "confirm") {
  871. c.btn = c.btn != null ? c.btn : ["确定", "取消"];
  872. c.btn1 = c.btn1 != null ? c.btn1 : null;
  873. c.btn2 = c.btn2 != null ? c.btn2 : null;
  874. c.btn3 = c.btn3 != null ? c.btn3 : null;
  875. c.btn4 = c.btn4 != null ? c.btn4 : null;
  876. }
  877.  
  878. xtiper_con_icon = c.icon ? " xtiper_con_icon" : "";
  879. let btnclass = new Array();
  880. btnclass[0] = c.btn1 != null ? ' class="xactive"' : "";
  881. btnclass[1] = c.btn2 != null ? ' class="xactive"' : "";
  882. btnclass[2] = c.btn3 != null ? ' class="xactive"' : "";
  883. btnclass[3] = c.btn4 != null ? ' class="xactive"' : "";
  884. if (c.btnbg && c.btnbg.length) {
  885. //自定义按钮颜色
  886. for (let i = 0; i < c.btnbg.length; i++) {
  887. btnclass[i] = c.btnbg[i] === true ? ' class="xactive"' : "";
  888. }
  889. }
  890.  
  891. let btnfun = new Array();
  892. btnfun[0] = c.btn1 || null;
  893. btnfun[1] = c.btn2 || null;
  894. btnfun[2] = c.btn3 || null;
  895. btnfun[3] = c.btn4 || null;
  896. that.btnfun = btnfun;
  897.  
  898. if (c.maxWidth) {
  899. c.width = that.maxSize(c.width, c.maxWidth);
  900. }
  901.  
  902. if (c.shade === true) {
  903. html += '<div class="xtiper_bg"></div>';
  904. }
  905. html +=
  906. '<div class="xtiper_main"' +
  907. (c.width ? 'style="width:' + c.width + ';"' : "") +
  908. ">";
  909. html +=
  910. '<div class="xtiper_tit"><p>' +
  911. c.title +
  912. '</p><div class="xtiper_minmax">';
  913. if (c.min === true) {
  914. html += '<div class="xtiper_min"></div>';
  915. }
  916. html += '<div class="xtiper_close"></div>';
  917. html += "</div></div>";
  918. let iconer = that.iconer();
  919. html +=
  920. '<div class="xtiper_pad"><div class="xtiper_pr"><div class="xtiper_tip">' +
  921. iconer +
  922. '<div class="xtiper_con' +
  923. xtiper_con_icon +
  924. '"><div class="xtiper_conin">' +
  925. c.tip;
  926. if (c.type == "alert" && c.times > 0) {
  927. c.times++;
  928. html += '(<span class="xtiper_times">' + c.times + "</span>)";
  929. }
  930. html += "</div></div></div></div></div>";
  931. html +=
  932. '<div class="xtiper_btn' +
  933. (c.icon && c.iconFlag === true ? " xtiper_btn_" + c.icon : "") +
  934. " xtiper_btn" +
  935. c.btn.length +
  936. '"><ul>';
  937.  
  938. for (let i = 0; i < 4; i++) {
  939. if (c.btn[i]) {
  940. html +=
  941. "<li" +
  942. btnclass[i] +
  943. "><button" +
  944. (btnclass[i] && c.iconColor && c.type == "confirm"
  945. ? ' style="background-color:' + c.iconColor + '"'
  946. : "") +
  947. ">" +
  948. c.btn[i] +
  949. "</button></li>";
  950. }
  951. }
  952.  
  953. html +=
  954. '</ul><div class="xtiper_btnbor"' +
  955. (c.iconColor ? ' style="background-color:' + c.iconColor + '"' : "") +
  956. "></div></div></div>";
  957. }
  958. //页面层
  959. else if (c.model == "open") {
  960. //是否已经触发过
  961. let ifxoff = that.findxoff();
  962. if (ifxoff === true) {
  963. return false;
  964. }
  965.  
  966. if (c.maxWidth) {
  967. c.width = that.maxSize(c.width, c.maxWidth);
  968. }
  969. if (c.maxHeight) {
  970. c.height = that.maxSize(c.height, c.maxHeight);
  971. }
  972.  
  973. //满屏页面不能最大化
  974. if (c.width == "100%" && c.height == "100%") {
  975. c.max = false;
  976. }
  977. let width = that.getsize(c.width);
  978. let height = that.getsize(c.height) || ["", ""];
  979. if (height[1] == "%") {
  980. let bheight = (window.innerHeight * height[0]) / 100;
  981. height[0] = Math.round(bheight);
  982. height[1] = "px";
  983. }
  984. let height_css = "";
  985. if (c.title) {
  986. height_css = " xtit";
  987. } else {
  988. if (c.move === true) {
  989. height_css = " xmin";
  990. }
  991. }
  992.  
  993. let newcontent;
  994. let xtiper_over = "";
  995. if (c.over === false) {
  996. xtiper_over = " xtiper_over";
  997. }
  998. if (c.type == "ready" || c.type == "noready") {
  999. //内容
  1000. let fir = c.content.substr(0, 1),
  1001. element,
  1002. content,
  1003. reg;
  1004. if (fir == "#") {
  1005. element = document.getElementById(
  1006. c.content.substr(1, c.content.length)
  1007. );
  1008. } else if (fir == ".") {
  1009. element = document.getElementsByClassName(
  1010. c.content.substr(1, c.content.length)
  1011. )[0];
  1012. } else {
  1013. return false;
  1014. }
  1015. if (!element) {
  1016. return false;
  1017. }
  1018. if (c.type == "ready") {
  1019. content = element.outerHTML;
  1020. //过滤主div标签的id
  1021. regid = /\#([A-z0-9_-]*)/;
  1022. content_id = c.content.match(regid);
  1023. if (content_id && content_id[1]) {
  1024. //reg = /\s+(id\=["']idname["'])/g;
  1025. reg = new RegExp("\\s+(id\\=[\"']" + content_id[1] + "[\"'])", "g");
  1026. content = content.replace(reg, "");
  1027. }
  1028. } else {
  1029. content = element.innerHTML;
  1030. reg = /\<\!\-{2}[\s\n]*([\S\s]*)[\s\n]*\-{2}\>/;
  1031. let match = content.match(reg);
  1032. if (!match || !match[1]) {
  1033. return false;
  1034. }
  1035. content = match[1];
  1036. }
  1037. newcontent =
  1038. '<div class="xtiper_content' +
  1039. xtiper_over +
  1040. "" +
  1041. height_css +
  1042. '"' +
  1043. (c.bgcolor ? ' style="background-color:' + c.bgcolor + '"' : "") +
  1044. ">" +
  1045. content +
  1046. "</div>";
  1047. } else if (c.type == "url") {
  1048. //页面
  1049. let scrolling = "auto";
  1050. if (c.over === false) {
  1051. scrolling = "no";
  1052. }
  1053. newcontent =
  1054. '<div class="xtiper_content' +
  1055. height_css +
  1056. ' xtiper_over"' +
  1057. (c.bgcolor ? ' style="background-color:' + c.bgcolor + '"' : "") +
  1058. '><div class="zw"></div><iframe parentid="' +
  1059. that.mainid +
  1060. '" id="' +
  1061. that.mainid +
  1062. '_id" name="' +
  1063. that.mainid +
  1064. '_name" scrolling="' +
  1065. scrolling +
  1066. '" allowtransparency="true" frameborder="0" src="' +
  1067. c.content +
  1068. '" style="width:100%; height:100%;"></iframe></div>';
  1069. } else if (c.type == "html") {
  1070. //html代码
  1071. newcontent =
  1072. '<div class="xtiper_content' +
  1073. xtiper_over +
  1074. "" +
  1075. height_css +
  1076. '"' +
  1077. (c.bgcolor ? ' style="background-color:' + c.bgcolor + '"' : "") +
  1078. ">" +
  1079. c.content +
  1080. "</div>";
  1081. } else if (c.type == "photo") {
  1082. //相册
  1083. let img = document.getElementsByTagName("img");
  1084. if (img.length == 0) {
  1085. return false;
  1086. }
  1087. let photo = new Array();
  1088. for (let i = 0; i < img.length; i++) {
  1089. if (that.dataset(img[i], "xphoto") == c.content) {
  1090. photo.push(img[i]);
  1091. }
  1092. }
  1093. if (!photo || photo.length == 0) {
  1094. return false;
  1095. }
  1096. let li =
  1097. '<div class="xtiper_photo_num' +
  1098. (c.iftitle === true ? " xon" : "") +
  1099. '"' +
  1100. (c.color ? 'style="color:' + c.color + ';"' : "") +
  1101. '><span class="xtiper_words"></span><span class="xtiper_nummax' +
  1102. (c.iforder === true ? " xon" : "") +
  1103. '"><span class="xtiper_num">' +
  1104. c.index +
  1105. "</span> / " +
  1106. photo.length +
  1107. "</span></div>";
  1108. if (photo.length > 1) {
  1109. li +=
  1110. '<div class="xtiper_photo_btn xtiper_photo_prev"></div><div class="xtiper_photo_btn xtiper_photo_next"></div>';
  1111. }
  1112. li += '<div class="xtiper_photo_ul"><ul>';
  1113. let xhref, xsrc;
  1114. let xindex = c.index - 1;
  1115. for (let i = 0; i < photo.length; i++) {
  1116. xhref = that.dataset(photo[i], "xhref")
  1117. ? that.dataset(photo[i], "xhref")
  1118. : "";
  1119. xsrc = that.dataset(photo[i], "xsrc")
  1120. ? that.dataset(photo[i], "xsrc")
  1121. : photo[i].src;
  1122. li +=
  1123. '<li class="xtiper_photo_li' +
  1124. (i == xindex ? " xon" : "") +
  1125. (that.ifmob === true ? " xapp" : "") +
  1126. '" data-xtitle="' +
  1127. photo[i].title +
  1128. '"><p style="background-image:url(\'' +
  1129. xsrc +
  1130. "');\">" +
  1131. (xhref ? '<a href="' + xhref + '" target="_blank">' : "") +
  1132. '<img src="' +
  1133. xsrc +
  1134. '">' +
  1135. (xhref ? "</a>" : "") +
  1136. (i == xindex && that.ifmob === true
  1137. ? '<span class="xtiper_icon xtiper_icon_load xtiper_photo_load"></span>'
  1138. : "") +
  1139. "</p></li>";
  1140. }
  1141. li += "</ul></div>";
  1142. newcontent =
  1143. '<div class="xtiper_content' +
  1144. xtiper_over +
  1145. "" +
  1146. height_css +
  1147. '"' +
  1148. (c.bgcolor ? ' style="background-color:' + c.bgcolor + '"' : "") +
  1149. ">" +
  1150. li +
  1151. "</div>";
  1152. }
  1153.  
  1154. if (c.shade === true) {
  1155. html += '<div class="xtiper_bg"></div>';
  1156. }
  1157. if (c.app === true) {
  1158. html +=
  1159. '<div class="xtiper_sheet' +
  1160. (that.ifmob === true && c.type == "photo" ? " xapp" : "") +
  1161. '" style="height:' +
  1162. height[0] +
  1163. "" +
  1164. height[1] +
  1165. ';">';
  1166. if (c.title) {
  1167. html +=
  1168. '<div class="xtiper_sheet_tit xtiper_sheet_left">' +
  1169. c.title +
  1170. "</div>";
  1171. }
  1172. } else {
  1173. html +=
  1174. '<div class="xtiper_main' +
  1175. (that.ifmob === true && c.type == "photo" ? " xapp" : "") +
  1176. '" style="width:' +
  1177. width[0] +
  1178. "" +
  1179. width[1] +
  1180. "; height:" +
  1181. height[0] +
  1182. "" +
  1183. height[1] +
  1184. ';">';
  1185. if (c.title) {
  1186. html +=
  1187. '<div class="xtiper_tit' +
  1188. (c.move === true ? "" : " xminmax") +
  1189. '"><p>' +
  1190. c.title +
  1191. '</p><div class="xtiper_minmax">';
  1192. if (c.min === true) {
  1193. html += '<div class="xtiper_min"></div>';
  1194. }
  1195. if (c.max === true) {
  1196. html += '<div class="xtiper_max"></div>';
  1197. }
  1198. if (c.closeBtn === true) {
  1199. html += '<div class="xtiper_close"></div>';
  1200. }
  1201. html += "</div></div>";
  1202. } else {
  1203. if (c.move === true) {
  1204. html += '<div class="xtiper_tit xtiper_tit_none"></div>';
  1205. }
  1206. if (c.closeBtn === true) {
  1207. html +=
  1208. '<div class="xtiper_close xtiper_close_notit' +
  1209. (c.photoapp === true ? " xtiper_close_photoapp" : "") +
  1210. '"></div>';
  1211. }
  1212. }
  1213. }
  1214. html += newcontent;
  1215. html += "</div>";
  1216. }
  1217. //加载层
  1218. else if (c.model == "load") {
  1219. html =
  1220. '<div class="xtiper_bg xtiper_bg_white"></div><div class="xtiper_loadin"><div class="xtiper_icon xtiper_icon_load"></div>';
  1221. if (c.tip) {
  1222. html += "<span>" + c.tip + "</span>";
  1223. }
  1224. html += "</div>";
  1225. if (c.closeBtn === true) {
  1226. html += '<div class="xtiper_close xtiper_close_load"></div>';
  1227. }
  1228. }
  1229. //面板菜单
  1230. else if (c.model == "sheet") {
  1231. let btnfun = new Array();
  1232. btnfun[0] = c.btn1 ? c.btn1 : null;
  1233. btnfun[1] = c.btn2 ? c.btn2 : null;
  1234. btnfun[2] = c.btn3 ? c.btn3 : null;
  1235. btnfun[3] = c.btn4 ? c.btn4 : null;
  1236. btnfun[4] = c.btn5 ? c.btn5 : null;
  1237. btnfun[5] = c.btn6 ? c.btn6 : null;
  1238. btnfun[6] = c.btn7 ? c.btn7 : null;
  1239. btnfun[7] = c.btn8 ? c.btn8 : null;
  1240. that.btnfun = btnfun;
  1241.  
  1242. let align = "xtiper_sheet_" + c.align;
  1243.  
  1244. html += '<div class="xtiper_bg"></div><div class="xtiper_sheet">';
  1245. if (c.title) {
  1246. html +=
  1247. '<div class="xtiper_sheet_tit ' + align + '">' + c.title + "</div>";
  1248. }
  1249. html += '<ul class="xtiper_sheet_ul ' + align + '">';
  1250. let licon, href, target;
  1251. for (let i = 0; i < c.btn.length; i++) {
  1252. if (btnfun[i]) {
  1253. if (typeof btnfun[i] == "function") {
  1254. licon = "<p>" + c.btn[i] + "</p>";
  1255. } else {
  1256. if (typeof btnfun[i] == "object") {
  1257. href = btnfun[i][0];
  1258. target = btnfun[i][1] ? btnfun[i][1] : "";
  1259. if (target && target.substr(0, 1) != "_") {
  1260. target = "_" + target;
  1261. }
  1262. target = ' target="' + target + '"';
  1263. } else {
  1264. href = btnfun[i];
  1265. target = "";
  1266. }
  1267. licon =
  1268. '<a href="' +
  1269. href +
  1270. '"' +
  1271. target +
  1272. "><p>" +
  1273. c.btn[i] +
  1274. "</p></a>";
  1275. }
  1276. } else {
  1277. licon = "<p>" + c.btn[i] + "</p>";
  1278. }
  1279. html += '<li class="xtiper_sheet_li">' + licon + "</li>";
  1280. }
  1281. if (!c.force) {
  1282. html +=
  1283. '<li class="xtiper_sheet_li xlast"><p>' + c.btnClose + "</p></li>";
  1284. }
  1285. html += "</ul></div>";
  1286. }
  1287. return html;
  1288. };
  1289.  
  1290. Xclass.pt.iconer = function () {
  1291. let that = this;
  1292. let c = that.c;
  1293.  
  1294. let html = "";
  1295. if (c.icon) {
  1296. if (c.iconFlag === true) {
  1297. html = '<i class="xtiper_icon xtiper_icon_' + c.icon + '"></i>';
  1298. } else {
  1299. html = '<img class="xtiper_icon" src="' + c.icon + '" />';
  1300. }
  1301. }
  1302. return html;
  1303. };
  1304.  
  1305. Xclass.pt.findxoff = function () {
  1306. let that = this;
  1307. let c = that.c;
  1308.  
  1309. let xoff = document.getElementsByClassName("xtiper");
  1310. let xoffdiv;
  1311. for (let i = 0; i < xoff.length; i++) {
  1312. let xcstr = that.dataset(xoff[i], "xcstr");
  1313. if (xcstr && xcstr == that.xcstr) {
  1314. xoffdiv = xoff[i];
  1315. }
  1316. }
  1317.  
  1318. if (xoffdiv) {
  1319. that.xtipdiv = xoffdiv;
  1320. that.mainid = xoffdiv.getAttribute("id");
  1321. xoffdiv.style.zIndex = c.zindex;
  1322. setTimeout(function () {
  1323. let maincss = c.app === true ? "xtiper_sheet" : "xtiper_main";
  1324. let xtiper_main = xoffdiv.getElementsByClassName(maincss)[0];
  1325. let data_width = that.dataset(xoffdiv, "xwidth");
  1326. let data_height = that.dataset(xoffdiv, "xheight");
  1327. let xleft = (window.innerWidth - data_width) / 2;
  1328. let xtop = (window.innerHeight - data_height) / 2;
  1329. if (maincss == "xtiper_main") {
  1330. xtiper_main.style.width = data_width + "px";
  1331. xtiper_main.style.height = data_height + "px";
  1332. xtiper_main.style.left = xleft + "px";
  1333. xtiper_main.style.top = xtop + "px";
  1334. let xtiper_min = xoffdiv.getElementsByClassName("xtiper_min")[0];
  1335. let xtiper_max = xoffdiv.getElementsByClassName("xtiper_max")[0];
  1336. if (xtiper_min) {
  1337. xtiper_min.style.display = "";
  1338. xtiper_min.classList.remove("xon");
  1339. }
  1340. if (xtiper_max) {
  1341. xtiper_max.style.display = "";
  1342. xtiper_max.classList.remove("xon");
  1343. }
  1344. }
  1345. if (c.lock === true) {
  1346. that.lock();
  1347. }
  1348. xoffdiv.classList.remove("xoff");
  1349. }, 1);
  1350. return true;
  1351. } else {
  1352. return false;
  1353. }
  1354. };
  1355.  
  1356. //设置data
  1357. Xclass.pt.dataset = function (element, datakey, dataval) {
  1358. //读取
  1359. if (dataval == null) {
  1360. if (element) {
  1361. return element.getAttribute("data-" + datakey);
  1362. }
  1363. }
  1364. //设置
  1365. else {
  1366. element.setAttribute("data-" + datakey, dataval);
  1367. }
  1368. };
  1369.  
  1370. //添加classname、属性
  1371. Xclass.pt.attr = function () {
  1372. let that = this;
  1373. let c = that.c;
  1374. let xtipdiv = that.xtipdiv;
  1375.  
  1376. //短消息
  1377. if (c.model == "msg") {
  1378. xtipdiv.classList.add("xtiper_msg");
  1379. xtipdiv.classList.add("xtiper_msg_" + c.pos);
  1380. xtipdiv.classList.add("xtiper_msg_" + c.type);
  1381. xtipdiv.style.whiteSpace = "nowrap";
  1382.  
  1383. let xwidth = xtipdiv.offsetWidth;
  1384. xwidth = xwidth / 2;
  1385. xtipdiv.style.marginLeft = "-" + xwidth + "px";
  1386. xtipdiv.style.whiteSpace = "";
  1387. }
  1388. //弹幕
  1389. else if (c.model == "danmu") {
  1390. xtipdiv.classList.add("xtiper_msg");
  1391. xtipdiv.classList.add("xtiper_msg_" + c.type);
  1392. xtipdiv.classList.add("xtiper_danmu");
  1393.  
  1394. function randomNum(n, m) {
  1395. return Math.round(Math.random() * (m - n)) + n;
  1396. }
  1397.  
  1398. let bheight = Math.round(window.innerHeight * 0.65);
  1399. let danmuTop = randomNum(10, bheight);
  1400. let bwidth = document.body.offsetWidth + 22;
  1401. xtipdiv.style.transform = "translateX(" + bwidth + "px)";
  1402. xtipdiv.style.top = danmuTop + "px";
  1403.  
  1404. let danmuli = document.getElementsByClassName("xtiper_danmu");
  1405. if (danmuli.length > 1) {
  1406. if (c.light === true) {
  1407. xtipdiv.classList.add("xtiper_danmu_light");
  1408. }
  1409. }
  1410. }
  1411. //气泡层
  1412. else if (c.model == "tips") {
  1413. xtipdiv.classList.add("xtiper_tips");
  1414. xtipdiv.classList.add("xtiper_tips_" + c.pos);
  1415. xtipdiv.style.width = xtipdiv.offsetWidth + "px";
  1416.  
  1417. //定位
  1418. let newelement = document.getElementById(c.element) || c.element;
  1419. let S = document.documentElement.scrollTop || document.body.scrollTop;
  1420. let C = newelement.getBoundingClientRect();
  1421. let W = newelement.offsetWidth;
  1422. let H = newelement.offsetHeight;
  1423. let dtop = S + C.top;
  1424. let dleft = C.left;
  1425. let B = 10;
  1426.  
  1427. if (c.pos == "left") {
  1428. let selfWidth = xtipdiv.offsetWidth;
  1429. dleft = dleft - selfWidth - B;
  1430. } else if (c.pos == "right") {
  1431. dleft = dleft + W + B;
  1432. } else if (c.pos == "top") {
  1433. let selfHeight = xtipdiv.offsetHeight;
  1434. dtop = dtop - selfHeight - B;
  1435. } else if (c.pos == "bottom") {
  1436. dtop = dtop + H + B;
  1437. }
  1438. xtipdiv.style.left = dleft + "px";
  1439. xtipdiv.style.top = dtop + "px";
  1440. }
  1441. //弹窗层
  1442. else if (c.model == "win" || c.model == "open") {
  1443. xtipdiv.classList.add("xtiper_win");
  1444. if (c.shade === true) {
  1445. xtipdiv.classList.add("xtiper_win_fixed");
  1446. }
  1447. let maincss = c.app === true ? "xtiper_sheet" : "xtiper_main";
  1448. let xtiper_main = xtipdiv.getElementsByClassName(maincss)[0];
  1449. let xtiper_tit = xtipdiv.getElementsByClassName("xtiper_tit")[0];
  1450. //原始窗口大小
  1451. that.dataset(xtipdiv, "xwidth", xtiper_main.offsetWidth);
  1452. that.dataset(xtipdiv, "xheight", xtiper_main.offsetHeight);
  1453. if (c.reset === false) {
  1454. that.dataset(xtipdiv, "xreset", 1);
  1455. }
  1456.  
  1457. if (c.model == "open" && that.xcstr) {
  1458. that.dataset(xtipdiv, "xcstr", that.xcstr);
  1459. }
  1460.  
  1461. if (c.min === true || c.max === true) {
  1462. let xmcss = "xmcss";
  1463. let y = 0;
  1464. if (c.min === true) {
  1465. y++;
  1466. }
  1467. if (c.max === true) {
  1468. y++;
  1469. }
  1470. xmcss = xmcss + y;
  1471. if (xtiper_tit) {
  1472. xtiper_tit.classList.add(xmcss);
  1473. }
  1474. }
  1475.  
  1476. let xleft, xtop;
  1477. if (c.model == "win") {
  1478. let width = that.getsize(c.width);
  1479. if (width && width[1] == "%") {
  1480. xleft = (100 - width[0]) / 2 + "%";
  1481. } else {
  1482. xleft = (window.innerWidth - xtiper_main.offsetWidth) / 2 + "px";
  1483. }
  1484. xtop = (window.innerHeight - xtiper_main.offsetHeight) / 2 + "px";
  1485. xtiper_main.style.height = xtiper_main.offsetHeight + "px";
  1486. xtiper_main.style.left = xleft;
  1487. xtiper_main.style.top = xtop;
  1488. } else if (c.model == "open") {
  1489. if (c.type == "ready") {
  1490. xtiper_main.getElementsByClassName(
  1491. "xtiper_content"
  1492. )[0].firstChild.style.display = "";
  1493. }
  1494.  
  1495. if (c.app === false) {
  1496. let width = that.getsize(c.width);
  1497.  
  1498. if (c.type == "photo" && c.autoHeight === true) {
  1499. let xindex = c.index - 1;
  1500. let imgdiv = xtipdiv
  1501. .getElementsByClassName("xtiper_photo_li")
  1502. [xindex].getElementsByTagName("img")[0];
  1503. imgdiv.onload = function () {
  1504. let img = imgdiv.offsetHeight;
  1505. img = img + 100;
  1506. if (img > window.innerHeight) {
  1507. if (c.title) {
  1508. img = window.innerHeight;
  1509. } else {
  1510. img = window.innerHeight - 26;
  1511. }
  1512. }
  1513. xtop = (window.innerHeight - img) / 2;
  1514. xtop = c.y ? xtop + c.y : xtop;
  1515. xtop = xtop + "px";
  1516. xtiper_main.style.height = img + "px";
  1517.  
  1518. if (width[1] == "%") {
  1519. xleft = (100 - width[0]) / 2;
  1520. xleft = c.x ? xleft + c.x : xleft;
  1521. xleft = xleft + width[1];
  1522. } else {
  1523. xleft = (window.innerWidth - xtiper_main.offsetWidth) / 2;
  1524. xleft = c.x ? xleft + c.x : xleft;
  1525. xleft = xleft + "px";
  1526. }
  1527. xtiper_main.style.left = xleft;
  1528. xtiper_main.style.top = xtop;
  1529. };
  1530. } else {
  1531. xtiper_main.style.height = xtiper_main.offsetHeight + "px";
  1532. xtop = (window.innerHeight - xtiper_main.offsetHeight) / 2;
  1533. xtop = c.y ? xtop + c.y : xtop;
  1534. xtop = xtop + "px";
  1535. }
  1536.  
  1537. if (width[1] == "%") {
  1538. xleft = (100 - width[0]) / 2;
  1539. xleft = c.x ? xleft + c.x : xleft;
  1540. xleft = xleft + width[1];
  1541. } else {
  1542. xleft = (window.innerWidth - xtiper_main.offsetWidth) / 2;
  1543. xleft = c.x ? xleft + c.x : xleft;
  1544. xleft = xleft + "px";
  1545. }
  1546.  
  1547. xtiper_main.style.left = xleft;
  1548. xtiper_main.style.top = xtop;
  1549. }
  1550. }
  1551.  
  1552. if (c.shade === false) {
  1553. xtiper_main.style.position = "fixed";
  1554. }
  1555. }
  1556. //加载层
  1557. else if (c.model == "load") {
  1558. xtipdiv.classList.add("xtiper_win");
  1559. xtipdiv.classList.add("xtiper_win_fixed");
  1560. }
  1561. //面板菜单
  1562. else if (c.model == "sheet") {
  1563. xtipdiv.classList.add("xtiper_win");
  1564. xtipdiv.classList.add("xtiper_win_fixed");
  1565. }
  1566.  
  1567. if (c.zindex) {
  1568. xtipdiv.style.zIndex = c.zindex;
  1569. }
  1570. };
  1571.  
  1572. //添加动画效果
  1573. Xclass.pt.on = function () {
  1574. let that = this;
  1575. let c = that.c;
  1576. let xtipdiv = that.xtipdiv;
  1577.  
  1578. setTimeout(function () {
  1579. xtipdiv.classList.add("xon");
  1580. }, 1);
  1581. };
  1582.  
  1583. //后续处理
  1584. Xclass.pt.after = function () {
  1585. let that = this;
  1586. let c = that.c;
  1587. let xtipdiv = that.xtipdiv;
  1588.  
  1589. //短消息、气泡层
  1590. if (c.model == "msg" || c.model == "tips") {
  1591. //自动关闭
  1592. that.autoClose();
  1593.  
  1594. if (c.model == "tips") {
  1595. //绑定关闭按钮及遮罩点击关闭
  1596. that.shade();
  1597. }
  1598. }
  1599. //弹幕
  1600. else if (c.model == "danmu") {
  1601. that.danmuStar();
  1602. xtipdiv.addEventListener("mouseenter", function () {
  1603. that.danmuStop();
  1604. });
  1605. xtipdiv.addEventListener("mouseleave", function () {
  1606. that.danmuStar();
  1607. });
  1608. }
  1609. //弹窗层、页面层
  1610. else if (c.model == "win" || c.model == "open") {
  1611. if (c.model == "win") {
  1612. //绑定按钮事件
  1613. let button = xtipdiv.getElementsByTagName("button");
  1614. let btnfun = that.btnfun;
  1615. for (let i = 0; i < 4; i++) {
  1616. that.bclick(button[i], btnfun[i], true);
  1617. }
  1618. }
  1619.  
  1620. //绑定最小化
  1621. if (c.min) {
  1622. let minbtn = xtipdiv.getElementsByClassName("xtiper_min")[0];
  1623. if (minbtn) {
  1624. minbtn.addEventListener("click", function () {
  1625. that.minmax("min");
  1626. });
  1627. }
  1628. }
  1629.  
  1630. //绑定最大化
  1631. if (c.max) {
  1632. let maxbtn = xtipdiv.getElementsByClassName("xtiper_max")[0];
  1633. if (maxbtn) {
  1634. maxbtn.addEventListener("click", function () {
  1635. that.minmax("max");
  1636. });
  1637. }
  1638. }
  1639.  
  1640. //绑定鼠标拖动
  1641. if (c.move === true) {
  1642. that.drag(true);
  1643. }
  1644.  
  1645. //绑定关闭按钮及遮罩点击关闭
  1646. that.shade();
  1647.  
  1648. //绑定键盘事件
  1649. if (c.model == "win" || c.model == "open") {
  1650. that.key();
  1651. }
  1652.  
  1653. //自动关闭
  1654. if (c.model == "win" && c.type == "alert" && c.times > 0) {
  1655. that.autoClose();
  1656. }
  1657.  
  1658. //相册按钮
  1659. if (c.type == "photo") {
  1660. that.photo();
  1661.  
  1662. let xindex = c.index - 1;
  1663. let li = xtipdiv.getElementsByClassName("xtiper_photo_li")[xindex];
  1664. let xtiper_words = xtipdiv.getElementsByClassName("xtiper_words")[0];
  1665. xtiper_words.innerHTML = that.dataset(li, "xtitle");
  1666. }
  1667.  
  1668. //回调函数
  1669. if (c.success && typeof c.success == "function") {
  1670. c.success(that);
  1671. }
  1672. }
  1673. //加载层
  1674. else if (c.model == "load") {
  1675. //自动关闭
  1676. that.autoClose();
  1677.  
  1678. //绑定关闭按钮
  1679. that.shade();
  1680. }
  1681. //面板菜单
  1682. else if (c.model == "sheet") {
  1683. //绑定关闭按钮及遮罩点击关闭
  1684. that.shade();
  1685. let btnfun = that.btnfun;
  1686.  
  1687. let xtipdiv_appli = xtipdiv.getElementsByClassName("xtiper_sheet_li");
  1688. let btnlen = xtipdiv_appli.length;
  1689. if (!c.force) {
  1690. btnlen = btnlen - 1;
  1691. }
  1692.  
  1693. //绑定按钮事件
  1694. for (let i = 0; i < btnlen; i++) {
  1695. that.bclick(xtipdiv_appli[i], btnfun[i]);
  1696. }
  1697.  
  1698. if (!c.force) {
  1699. xtipdiv_appli[btnlen].addEventListener("click", function () {
  1700. that.close();
  1701. if (c.end) {
  1702. c.end();
  1703. }
  1704. });
  1705. }
  1706. }
  1707.  
  1708. //锁定滚动条
  1709. that.lock();
  1710. };
  1711.  
  1712. Xclass.pt.ulli = function (li, aa, xx, yy, close) {
  1713. let that = this;
  1714. let xtipdiv = that.xtipdiv;
  1715. let xtiper_content = xtipdiv.getElementsByClassName("xtiper_content")[0];
  1716. let opacity;
  1717.  
  1718. for (let i = 0; i < li.length; i++) {
  1719. if (li[i].classList.contains("xon") === true) {
  1720. if (aa == "left") {
  1721. if (xx) {
  1722. li[i].style.left = xx + "px";
  1723. } else {
  1724. li[i].style.left = "";
  1725. }
  1726. } else {
  1727. li[i].style.left = xx + "px";
  1728. li[i].style.top = yy + "px";
  1729. opacity = 1 - ((yy / 4) * 3) / 120;
  1730. if (opacity < 0) {
  1731. opacity = 0;
  1732. }
  1733. xtiper_content.style.backgroundColor =
  1734. "rgba(0, 0, 0, " + opacity + ")";
  1735. if (close === true) {
  1736. if (yy > 120) {
  1737. that.close();
  1738. } else {
  1739. li[i].style.left = "";
  1740. li[i].style.top = "";
  1741. xtiper_content.style.backgroundColor = "rgba(0, 0, 0, 1)";
  1742. }
  1743. }
  1744. }
  1745. }
  1746. }
  1747. };
  1748.  
  1749. Xclass.pt.photo = function () {
  1750. let that = this;
  1751. let c = that.c;
  1752. let xtipdiv = that.xtipdiv;
  1753.  
  1754. let ul = xtipdiv.getElementsByClassName("xtiper_photo_ul")[0];
  1755. let li = xtipdiv.getElementsByClassName("xtiper_photo_li");
  1756. let prev = xtipdiv.getElementsByClassName("xtiper_photo_prev")[0];
  1757. let next = xtipdiv.getElementsByClassName("xtiper_photo_next")[0];
  1758.  
  1759. if (prev && li.length > 1) {
  1760. prev.addEventListener("click", function () {
  1761. that.photoBtn("prev");
  1762. });
  1763. }
  1764. if (next && li.length > 1) {
  1765. next.addEventListener("click", function () {
  1766. that.photoBtn("next");
  1767. });
  1768. }
  1769.  
  1770. //移动端
  1771. if (that.ifmob === true && li.length > 1) {
  1772. let aa = null;
  1773. let moveX1, moveX2, moveY1, moveY2, xx, yy;
  1774. ul.addEventListener("touchstart", function (e) {
  1775. moveX1 = e.changedTouches[0].pageX;
  1776. moveY1 = e.changedTouches[0].pageY;
  1777. that.touchmove(false);
  1778. });
  1779.  
  1780. ul.addEventListener("touchmove", function (e) {
  1781. moveX2 = e.changedTouches[0].pageX;
  1782. moveY2 = e.changedTouches[0].pageY;
  1783. xx = moveX2 - moveX1;
  1784. yy = moveY2 - moveY1;
  1785. if (Math.abs(xx) > Math.abs(yy)) {
  1786. aa = aa ? aa : "left";
  1787. } else {
  1788. aa = aa ? aa : "top";
  1789. }
  1790. that.ulli(li, aa, xx, yy);
  1791. });
  1792.  
  1793. ul.addEventListener("touchend", function (e) {
  1794. if (moveX1 > moveX2) {
  1795. if (moveX1 - moveX2 > 40 && aa == "left") {
  1796. that.photoBtn("next");
  1797. }
  1798. } else {
  1799. if (moveX2 - moveX1 > 40 && aa == "left") {
  1800. that.photoBtn("prev");
  1801. }
  1802. }
  1803. that.ulli(li, aa, "", yy, true);
  1804. aa = null;
  1805. });
  1806.  
  1807. ul.addEventListener("click", function (e) {
  1808. that.close();
  1809. });
  1810. } else {
  1811. ul.addEventListener("touchstart", function (e) {
  1812. return false;
  1813. });
  1814.  
  1815. ul.addEventListener("touchend", function (e) {
  1816. return false;
  1817. });
  1818.  
  1819. ul.addEventListener("click", function (e) {
  1820. return false;
  1821. });
  1822. }
  1823. };
  1824.  
  1825. Xclass.pt.photoBtn = function (type) {
  1826. let that = this;
  1827. let c = that.c;
  1828. let xtipdiv = that.xtipdiv;
  1829.  
  1830. let li = xtipdiv.getElementsByClassName("xtiper_photo_li");
  1831. let xtiper_main = xtipdiv.getElementsByClassName("xtiper_main")[0];
  1832. if (xtiper_main.classList.contains("xtiper_main_photo") === true) {
  1833. return false;
  1834. }
  1835. xtiper_main.classList.add("xtiper_main_photo");
  1836. let index = 0,
  1837. old = 0;
  1838. for (let i = 0; i < li.length; i++) {
  1839. if (li[i].classList.contains("xon") === true) {
  1840. index = old = i;
  1841. }
  1842. }
  1843. if (type == "prev") {
  1844. index--;
  1845. if (index < 0) {
  1846. index = li.length - 1;
  1847. }
  1848. } else if (type == "next") {
  1849. index++;
  1850. if (index > li.length - 1) {
  1851. index = 0;
  1852. }
  1853. }
  1854.  
  1855. that.now = index;
  1856.  
  1857. let xnum = index + 1;
  1858. let xtiper_num = xtiper_main.getElementsByClassName("xtiper_num")[0];
  1859. xtiper_num.innerHTML = xnum;
  1860. let xtiper_words = xtiper_main.getElementsByClassName("xtiper_words")[0];
  1861.  
  1862. let img;
  1863. for (let i = 0; i < li.length; i++) {
  1864. if (i == index) {
  1865. li[i].classList.add("xon");
  1866. xtiper_words.innerHTML = that.dataset(li[i], "xtitle");
  1867. xtiper_num.innerHTML = xnum;
  1868. if (c.autoHeight === true) {
  1869. img = li[i].getElementsByTagName("img")[0].offsetHeight;
  1870. img = img + 100;
  1871. if (img > window.innerHeight) {
  1872. if (c.title) {
  1873. img = window.innerHeight;
  1874. } else {
  1875. img = window.innerHeight - 26;
  1876. }
  1877. }
  1878. xtiper_main.style.height = img + "px";
  1879. xtiper_main.style.top = (window.innerHeight - img) / 2 + "px";
  1880. }
  1881. } else {
  1882. li[i].classList.remove("xon");
  1883. }
  1884. if (i == old) {
  1885. li[i].classList.add("xold_" + type);
  1886. } else {
  1887. li[i].classList.remove("xold_prev");
  1888. li[i].classList.remove("xold_next");
  1889. }
  1890. }
  1891. setTimeout(function () {
  1892. li[old].classList.remove("xold_" + type);
  1893. xtiper_main.classList.remove("xtiper_main_photo");
  1894. }, 401);
  1895. };
  1896.  
  1897. Xclass.pt.appScroll = function (e) {
  1898. e.preventDefault();
  1899. };
  1900.  
  1901. Xclass.pt.touchmove = function (type) {
  1902. let that = this;
  1903.  
  1904. if (type === false) {
  1905. document.body.addEventListener("touchmove", that.appScroll, {
  1906. passive: false,
  1907. });
  1908. } else {
  1909. document.body.removeEventListener("touchmove", that.appScroll, {
  1910. passive: false,
  1911. });
  1912. }
  1913. };
  1914.  
  1915. Xclass.pt.xcstrRep = function (str) {
  1916. str = str.replace(/[\s\n\r]/g, ""); //空格换行回车
  1917. str = encodeURIComponent(str).toLowerCase();
  1918.  
  1919. let reparr = [
  1920. [/true/g, "1"],
  1921. [/false/g, "0"],
  1922. [/%/g, ""],
  1923. [/\(/g, ""],
  1924. [/\)/g, ""],
  1925. [/open/g, "o"],
  1926. [/ready/g, "r"],
  1927. [/noready/g, "n"],
  1928. [/url/g, "u"],
  1929. [/html/g, "h"],
  1930. [/photo/g, "p"],
  1931. [/function/g, "f"],
  1932. [/99999/g, "9"],
  1933. ];
  1934. for (let i = 0; i < reparr.length; i++) {
  1935. str = str.replace(reparr[i][0], reparr[i][1]);
  1936. }
  1937.  
  1938. return str;
  1939. };
  1940.  
  1941. Xclass.pt.maxSize = function (oldval, newval) {
  1942. let that = this;
  1943.  
  1944. let oldsize = that.getsize(oldval) || "";
  1945. let newsize = that.getsize(newval);
  1946. if (oldsize && oldsize[1] == "px" && newsize[1] == "%") {
  1947. if (oldsize[0] > window.innerWidth) {
  1948. return (newsize[0] > 100 ? 100 : newsize[0]) + "%";
  1949. } else {
  1950. return oldval;
  1951. }
  1952. } else {
  1953. return oldval;
  1954. }
  1955. };
  1956.  
  1957. //弹幕开始
  1958. Xclass.pt.danmuStar = function () {
  1959. let that = this;
  1960. let c = that.c;
  1961. let xtipdiv = that.xtipdiv;
  1962.  
  1963. xtipdiv.classList.add("xtiper_danmu_animate");
  1964. if (xtipdiv.style.animationDuration == "") {
  1965. xtipdiv.style.animationDuration = "6s";
  1966. }
  1967.  
  1968. let danmutime = Number(xtipdiv.style.animationDuration.replace(/s/, ""));
  1969. that.dataset(xtipdiv, "xdanmu", danmutime);
  1970.  
  1971. that.outtime = setTimeout(function () {
  1972. that.close();
  1973. }, danmutime * 1000 + 1);
  1974. };
  1975.  
  1976. //弹幕停止
  1977. Xclass.pt.danmuStop = function () {
  1978. let that = this;
  1979. let c = that.c;
  1980. let xtipdiv = that.xtipdiv;
  1981.  
  1982. let bwidth = document.body.offsetWidth + 22;
  1983. let newtranslate = xtipdiv.getBoundingClientRect().left;
  1984. xtipdiv.style.transform = "translateX(" + newtranslate + "px)";
  1985.  
  1986. if (that.outtime) {
  1987. clearInterval(that.outtime);
  1988. that.outtime = null;
  1989. }
  1990.  
  1991. let progress = newtranslate / bwidth;
  1992. let lesstime = 6 * progress;
  1993. if (lesstime < 0.4) {
  1994. lesstime = 0.4;
  1995. }
  1996. that.dataset(xtipdiv, "xdanmu", lesstime);
  1997. xtipdiv.style.animationDuration = lesstime + "s";
  1998. xtipdiv.classList.remove("xtiper_danmu_animate");
  1999. };
  2000.  
  2001. //绑定按钮事件
  2002. Xclass.pt.bclick = function (btn, fun, ifclose) {
  2003. let that = this;
  2004.  
  2005. if (btn) {
  2006. if (fun && typeof fun == "function") {
  2007. btn.addEventListener("click", function () {
  2008. fun();
  2009. that.close();
  2010. });
  2011. } else {
  2012. if (ifclose === true) {
  2013. btn.addEventListener("click", function () {
  2014. that.close();
  2015. });
  2016. }
  2017. }
  2018. }
  2019. };
  2020.  
  2021. //自动关闭
  2022. Xclass.pt.autoClose = function () {
  2023. let that = this;
  2024. let c = that.c;
  2025. let xtipdiv = that.xtipdiv;
  2026.  
  2027. //倒计时
  2028. if (xtipdiv.getElementsByClassName("xtiper_times")[0]) {
  2029. let times = c.times - 1;
  2030. let i = times;
  2031. let fn = function () {
  2032. xtiper_times = xtipdiv.getElementsByClassName("xtiper_times")[0];
  2033. xtiper_times.innerHTML = i;
  2034. if (i <= 0) {
  2035. that.close();
  2036. clearInterval(that.timer);
  2037. that.timer = null;
  2038. }
  2039. i--;
  2040. };
  2041. that.timer = setInterval(fn, 1000);
  2042. fn();
  2043. } else {
  2044. let times = c.times;
  2045. if (times && times != 0) {
  2046. setTimeout(function () {
  2047. that.close();
  2048. }, times * 1000);
  2049. }
  2050. }
  2051. };
  2052.  
  2053. //锁定滚动条
  2054. Xclass.pt.lock = function () {
  2055. let that = this;
  2056. let c = that.c;
  2057. let xtipdiv = that.xtipdiv;
  2058.  
  2059. if (c.lock === true) {
  2060. that.dataset(xtipdiv, "xlock", 1);
  2061. document.documentElement.style.overflowY = "hidden";
  2062. that.touchmove(false);
  2063. }
  2064. };
  2065.  
  2066. //解除锁定滚动条
  2067. Xclass.pt.unlock = function () {
  2068. let that = this;
  2069. let flag = 0;
  2070. let winli = document.getElementsByClassName("xtiper_win");
  2071.  
  2072. for (let i = 0; i < winli.length; i++) {
  2073. if (
  2074. that.dataset(winli[i], "xlock") == 1 &&
  2075. winli[i].classList.contains("xoff") === false
  2076. ) {
  2077. flag++;
  2078. }
  2079. if (
  2080. winli[i].classList.contains("xoff") === true &&
  2081. winli[i].getAttribute("id") == that.mainid
  2082. ) {
  2083. flag++;
  2084. }
  2085. }
  2086. if (flag <= 1) {
  2087. document.documentElement.style.overflowY = "";
  2088. }
  2089. that.touchmove(true);
  2090. };
  2091.  
  2092. //绑定最大化、最小化
  2093. Xclass.pt.minmax = function (mtype, act) {
  2094. let that = this;
  2095. let c = that.c;
  2096. let xtipdiv = that.xtipdiv;
  2097.  
  2098. let iftype, setwidth, setheight;
  2099. if (mtype == "min") {
  2100. iftype = that.dataset(xtipdiv, "xmin");
  2101. setwidth = "190px";
  2102. setheight = "40px";
  2103. } else if (mtype == "max") {
  2104. iftype = that.dataset(xtipdiv, "xmax");
  2105. setwidth = "100%";
  2106. setheight = "100%";
  2107. }
  2108.  
  2109. let xtiper_tit = xtipdiv.getElementsByClassName("xtiper_tit")[0];
  2110. let xtiper_main = xtipdiv.getElementsByClassName("xtiper_main")[0];
  2111. let xtiper_content = xtipdiv.getElementsByClassName("xtiper_content")[0];
  2112. let minbtn = xtipdiv.getElementsByClassName("xtiper_min")[0];
  2113. let maxbtn = xtipdiv.getElementsByClassName("xtiper_max")[0];
  2114. let xtiper_bg = xtipdiv.getElementsByClassName("xtiper_bg")[0];
  2115.  
  2116. if (iftype == 1 || act == 1) {
  2117. //还原
  2118. xtiper_main.style.width = that.dataset(xtipdiv, "xwidth") + "px";
  2119. xtiper_main.style.height = that.dataset(xtipdiv, "xheight") + "px";
  2120. let data_width = xtiper_main.offsetWidth;
  2121. let data_height = xtiper_main.offsetHeight;
  2122. let xleft = (window.innerWidth - data_width) / 2;
  2123. let xtop = (window.innerHeight - data_height) / 2;
  2124. xtiper_main.style.left = xleft + "px";
  2125. xtiper_main.style.top = xtop + "px";
  2126. xtiper_tit.classList.remove("xminmax");
  2127. xtiper_tit.classList.remove("xmin");
  2128. xtiper_tit.getElementsByTagName("p")[0].setAttribute("title", "");
  2129. that.dataset(xtipdiv, "xmin", "");
  2130. that.dataset(xtipdiv, "xmax", "");
  2131. if (minbtn) {
  2132. minbtn.classList.remove("xon");
  2133. minbtn.style.display = "";
  2134. }
  2135. if (maxbtn) {
  2136. maxbtn.classList.remove("xon");
  2137. maxbtn.style.display = "";
  2138. }
  2139. that.drag(true);
  2140.  
  2141. //最小化还原遮罩
  2142. if (
  2143. (c.model == "win" || c.model == "open") &&
  2144. c.shade === true &&
  2145. c.min === true
  2146. ) {
  2147. xtipdiv.classList.add("xtiper_win_fixed");
  2148. xtiper_bg.classList.remove("xmin");
  2149. xtiper_main.style.position = "";
  2150. }
  2151. } else {
  2152. //变形
  2153. xtiper_main.style.width = setwidth;
  2154. xtiper_main.style.height = setheight;
  2155. xtiper_tit.classList.add("xminmax");
  2156.  
  2157. if (mtype == "min") {
  2158. xtiper_tit.classList.add("xmin");
  2159. xtiper_tit
  2160. .getElementsByTagName("p")[0]
  2161. .setAttribute(
  2162. "title",
  2163. xtiper_tit.getElementsByTagName("p")[0].innerHTML
  2164. );
  2165. that.dataset(xtipdiv, "xmin", 1);
  2166. xtiper_main.style.top = "auto";
  2167. xtiper_main.style.bottom = "0";
  2168. xtiper_main.style.left = "0";
  2169. minbtn.classList.add("xon");
  2170. if (maxbtn) {
  2171. maxbtn.style.display = "none";
  2172. }
  2173.  
  2174. //最小化关闭遮罩
  2175. if (
  2176. (c.model == "win" || c.model == "open") &&
  2177. c.shade === true &&
  2178. c.min === true
  2179. ) {
  2180. xtipdiv.classList.remove("xtiper_win_fixed");
  2181. xtiper_bg.classList.add("xmin");
  2182. xtiper_main.style.position = "fixed";
  2183. }
  2184. } else if (mtype == "max") {
  2185. that.dataset(xtipdiv, "xmax", 1);
  2186. xtiper_main.style.top = "0";
  2187. xtiper_main.style.left = "0";
  2188. maxbtn.classList.add("xon");
  2189. if (minbtn) {
  2190. minbtn.style.display = "none";
  2191. }
  2192. }
  2193. that.drag(false);
  2194. }
  2195. };
  2196.  
  2197. //绑定鼠标拖动
  2198. Xclass.pt.drag = function (open) {
  2199. let that = this;
  2200. let c = that.c;
  2201. let xtipdiv = that.xtipdiv;
  2202.  
  2203. let drag = xtipdiv.getElementsByClassName("xtiper_tit")[0];
  2204. if (!drag) {
  2205. return false;
  2206. }
  2207. let drag_main = xtipdiv.getElementsByClassName("xtiper_main")[0];
  2208.  
  2209. if (open === true) {
  2210. drag.onmousedown = function (event) {
  2211. //允许3/4的区域拖动到页面外
  2212. let overX = (drag_main.offsetWidth / 4) * 3;
  2213. let overY = (drag_main.offsetHeight / 4) * 3;
  2214.  
  2215. drag_main.classList.add("xon");
  2216. event = event || window.event;
  2217. let diffX = event.clientX - drag_main.offsetLeft;
  2218. let diffY = event.clientY - drag_main.offsetTop;
  2219. if (typeof drag_main.setCapture !== "undefined") {
  2220. drag_main.setCapture();
  2221. }
  2222. document.onmousemove = function (event) {
  2223. event = event || window.event;
  2224. let moveX = event.clientX - diffX;
  2225. let moveY = event.clientY - diffY;
  2226. if (moveX < -overX) {
  2227. moveX = -overX;
  2228. } else if (
  2229. moveX >
  2230. document.body.offsetWidth - drag_main.offsetWidth + overX
  2231. ) {
  2232. moveX = document.body.offsetWidth - drag_main.offsetWidth + overX;
  2233. }
  2234. if (moveY < 0) {
  2235. moveY = 0;
  2236. } else if (
  2237. moveY >
  2238. window.innerHeight - drag_main.offsetHeight + overY
  2239. ) {
  2240. moveY = window.innerHeight - drag_main.offsetHeight + overY;
  2241. }
  2242. drag_main.style.left = moveX + "px";
  2243. drag_main.style.top = moveY + "px";
  2244. };
  2245. document.onmouseup = function (event) {
  2246. drag_main.classList.remove("xon");
  2247. this.onmousemove = null;
  2248. this.onmouseup = null;
  2249. //修复低版本ie bug
  2250. if (typeof drag_main.releaseCapture != "undefined") {
  2251. drag_main.releaseCapture();
  2252. }
  2253. };
  2254. };
  2255. } else {
  2256. drag.onmousedown = function (event) {
  2257. return false;
  2258. document.onmousemove = function (event) {
  2259. return false;
  2260. };
  2261. document.onmouseup = function (event) {
  2262. return false;
  2263. };
  2264. };
  2265. }
  2266. };
  2267.  
  2268. //绑定关闭按钮及遮罩点击关闭
  2269. Xclass.pt.shade = function () {
  2270. let that = this;
  2271. let c = that.c;
  2272. let xtipdiv = that.xtipdiv;
  2273.  
  2274. let close = xtipdiv.getElementsByClassName("xtiper_close")[0];
  2275. if (close) {
  2276. close.addEventListener("click", function () {
  2277. that.close();
  2278. if (c.end && typeof c.end == "function") {
  2279. c.end();
  2280. }
  2281. });
  2282. }
  2283.  
  2284. if (c.shadeClose) {
  2285. let bg = xtipdiv.getElementsByClassName("xtiper_bg")[0];
  2286. bg.addEventListener("click", function () {
  2287. if (c.model == "sheet" && c.force) {
  2288. xtip.msg(c.force);
  2289. return false;
  2290. } else {
  2291. that.close();
  2292. if (c.end && typeof c.end == "function") {
  2293. c.end();
  2294. }
  2295. }
  2296. });
  2297. }
  2298. };
  2299.  
  2300. //键盘事件
  2301. Xclass.pt.key = function () {
  2302. let that = this;
  2303. let c = that.c;
  2304. let xtipdiv = that.xtipdiv;
  2305.  
  2306. document.onkeydown = function (event) {
  2307. let e = event || window.event || arguments.callee.caller.arguments[0];
  2308. if (e) {
  2309. if (e.keyCode == 27) {
  2310. //按 Esc
  2311. that.close();
  2312. } else if (e.keyCode == 13) {
  2313. //按 Enter
  2314. if (c.model == "win") {
  2315. //多按钮取消回车事件
  2316. if (c.btn2 || c.btn3) {
  2317. return false;
  2318. }
  2319. that.close();
  2320. if (c.btn1 && typeof c.btn1 == "function") {
  2321. c.btn1();
  2322. c.btn1 = null;
  2323. }
  2324. return false;
  2325. }
  2326. } else {
  2327. return e;
  2328. }
  2329. }
  2330. };
  2331. };
  2332.  
  2333. /*
  2334. * 关闭层
  2335. * 关闭层id
  2336. * 是否检查锁定层 checkLock
  2337. */
  2338. Xclass.pt.close = function (closeid) {
  2339. let that = this;
  2340. let c = that.c;
  2341. let checkLock = false;
  2342. let xtipdiv = null;
  2343.  
  2344. if (closeid) {
  2345. xtipdiv = document.getElementById(closeid);
  2346. if (!xtipdiv) {
  2347. return false;
  2348. }
  2349. if (that.dataset(xtipdiv, "xlock") == 1) {
  2350. checkLock = true;
  2351. }
  2352. } else {
  2353. xtipdiv = that.xtipdiv;
  2354. if (c.lock === true) {
  2355. checkLock = true;
  2356. }
  2357. }
  2358.  
  2359. if (!xtipdiv) {
  2360. return false;
  2361. }
  2362.  
  2363. //弹幕类型不用延时
  2364. let closenow = false;
  2365. if (xtipdiv.classList.contains("xtiper_danmu") === true) {
  2366. closenow = true;
  2367. } else {
  2368. closenow = false;
  2369. }
  2370.  
  2371. //不用延时关闭
  2372. if (closenow === true) {
  2373. let parent_xtipdiv = xtipdiv.parentNode;
  2374. if (parent_xtipdiv) {
  2375. parent_xtipdiv.removeChild(xtipdiv);
  2376. }
  2377. } else {
  2378. if (that.dataset(xtipdiv, "xreset") == 1) {
  2379. xtipdiv.classList.add("xoff");
  2380. if (c.lock === true) {
  2381. that.unlock();
  2382. }
  2383. setTimeout(function () {
  2384. xtipdiv.style.zIndex = "-99999";
  2385. if (c.min === true) {
  2386. that.minmax("min", 1);
  2387. }
  2388. if (c.max === true) {
  2389. that.minmax("max", 1);
  2390. }
  2391. if (c.model == "open" && c.type == "photo") {
  2392. if (that.ifmob === true) {
  2393. let xtiper_content =
  2394. xtipdiv.getElementsByClassName("xtiper_content")[0];
  2395. xtiper_content.style.backgroundColor = "rgba(0, 0, 0, 1)";
  2396. }
  2397. let li = xtipdiv.getElementsByClassName("xtiper_photo_li");
  2398. if (li.length > 0) {
  2399. for (let i = 0; i < li.length; i++) {
  2400. li[i].style.left = "";
  2401. li[i].style.top = "";
  2402. }
  2403. }
  2404. }
  2405. }, 201);
  2406. } else {
  2407. xtipdiv.classList.remove("xon");
  2408. setTimeout(function () {
  2409. let parent_xtipdiv = xtipdiv.parentNode;
  2410. if (parent_xtipdiv) {
  2411. parent_xtipdiv.removeChild(xtipdiv);
  2412. }
  2413. }, 201);
  2414. }
  2415. }
  2416.  
  2417. //关闭层有锁定属性的才执行解除锁定
  2418. if (checkLock === true) {
  2419. that.unlock();
  2420. }
  2421. };
  2422.  
  2423. /*
  2424. * 关闭所有层
  2425. */
  2426. Xclass.pt.closeAll = function () {
  2427. let that = this;
  2428.  
  2429. let msgall = document.getElementsByClassName("xtiper");
  2430. if (msgall.length <= 0) {
  2431. return false;
  2432. }
  2433. for (let i = 0; i < msgall.length; i++) {
  2434. that.close(msgall[i].getAttribute("id"));
  2435. }
  2436. document.documentElement.style.overflowY = "";
  2437. that.touchmove(true);
  2438. };
  2439.  
  2440. //单位处理
  2441. Xclass.pt.getsize = function (size) {
  2442. if (size) {
  2443. let reg = /([0-9]+)(px|\%)/;
  2444. let size_arr = size.match(reg);
  2445. let arr = new Array();
  2446. arr[0] = Number(size_arr[1]);
  2447. arr[1] = size_arr[2];
  2448. return arr;
  2449. }
  2450. };
  2451.  
  2452. //设置高度
  2453. Xclass.pt.setSize = function (type, px) {
  2454. let that = this;
  2455. let c = that.c;
  2456. if (c.model == "open") {
  2457. let xtipdiv = that.xtipdiv;
  2458. let xtiper_main = xtipdiv.getElementsByClassName("xtiper_main")[0];
  2459. px = parseInt(px);
  2460. if (type == "height") {
  2461. let xtop = (window.innerHeight - px) / 2;
  2462. xtiper_main.style.height = px + "px";
  2463. xtiper_main.style.top = xtop + "px";
  2464. }
  2465. }
  2466. };
  2467.  
  2468. //设置高度
  2469. Xclass.pt.setHeight = function (px) {
  2470. let that = this;
  2471. that.setSize("height", px);
  2472. };
  2473.  
  2474. return xtip;
  2475. });

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址