注：样式文件在底部

showToast

showToast.gifshowToast1.gif

  1. /*提示弹窗
  2.  *@method showToast
  3.  *@for
  4.  *@param{对象}options: otpions.icon;options.title;options.duration;
  5.  *@return {void}
  6. */
  7. function showToast(options) {
  8.     options = options ? options : {};
  9.     options.icon = options.icon != 'none';
  10.     options.title = options.title ? options.title : '';
  11.     options.duration = options.duration ? options.duration : 1500;
  12.     var toast = '<div class="toast"><div class="toast-wrapper">'
  13.         + (options.icon ? '<div class="toast-icon"><img src="../imgs/i_success.png" alt="" class="img"></div>' : '') + 
  14.         '<div class="toast-content">' + options.title + '</div></div></div>';
  15.     $('body').append(toast);
  16.     setTimeout(() => {
  17.         $('.toast').fadeOut(500).remove();
  19.     }, options.duration);
  20. }
  21. // 使用
  22. showToast({title: '登录成功！'})

showLoading、hideLoading

showLoading.gif

  1. /*提示弹窗
  2.  *@method showLoading
  3.  *@for
  4.  *@param{对象}options: otpions.icon;options.title;options.duration;
  5.  *@return {void}
  6. */
  7. function showLoading(options) {
  8.     options = options ? options : {};
  9.     options.icon = options.icon != 'none';
  10.     options.title = options.title ? options.title : '加载中...';
  11.     options.duration = options.duration ? options.duration : 1500;
  12.     var loading = '<div class="loading"><div class="loading-wrapper">'
  13.         + (options.icon ? '<div class="loading-icon"><img src="../imgs/loading.gif" alt="" class="img"></div>' : '') + 
  14.         '<div class="loading-content">' + options.title + '</div></div></div>';
  15.     $('body').append(loading);
  16. };
  17. function hideLoading() {
  18.     $('.loading').fadeOut(500).remove();
  19. };
  20. // 使用
  21. showLoading({title: '加载中...'});
  22. $.ajax({
  23.   ..., 
  24.   complete: function() {
  25.       hideLoading();
  26.     }
  27. })

showModel

showModel.gif

  1. /*提示弹窗
  2.  *@method showModel
  3.  *@for
  4.  *@param{对象}options: otpions.icon;options.content;options.showCancel;options.onCancel;options.confirmText;options.onConfirm;
  5.  *@return {void}
  6. */
  7. function showModel(options) {
  8.     options = options ? options : {};
  9.     options.icon = options.icon ? options.icon : '';
  10.     options.content = options.content ? options.content : '';
  11.     options.showCancel = !!options.showCancel;
  12.     options.cancelText = options.cancelText ? options.cancelText : '取消';
  13.     options.confirmText = options.confirmText ? options.confirmText : '确认';
  14.     options.onCancel = options.onCancel ? options.onCancel : function() {};
  15.     options.onConfirm = options.onConfirm ? options.onConfirm : function() {};
  16.     var model = '<div class="model">' +
  17.         '<div class="model-wrapper">' +
  18.             '<div class="model-box">' +
  19.                 '<div class="model-icon"><img src="' + options.icon + '" alt="" class="img"></div>' +
  20.                 '<div class="model-content">' + options.content + '</div>' +
  21.             '</div>' +
  22.             '<div class="model-btns">' +
  23.                 (options.showCancel ? '<div class="model-cancel">' + options.cancelText + '</div>' : '') +
  24.                 '<div class="model-confirm">' + options.confirmText + '</div>' +
  25.             '</div>' +
  26.         '</div>' +
  27.     '</div>';
  28.     $('body').append(model);
  29.     $('.model-cancel').click(function() {
  30.         $('.model').fadeOut(500).remove();
  31.         options.onCancel();
  32.     });
  33.     $('.model-confirm').click(function() {
  34.         $('.model').fadeOut(500).remove();
  35.         options.onConfirm();
  36.     });
  37. };
  38. // 使用
  39. showModel({
  40.   content: '确认提交吗？',
  41.   showCancel: true,
  42.   cancelText: '取消',
  43.   comfirmText: '确认',
  44.   onCancel: function() {
  45.     console.log('取消');
  46.   },
  47.   onComfirm: function() {
  48.     console.log('确认');
  49.   }
  50. })

CSS

  2. .toast {
  3.   position: fixed;
  4.   width: 100vw;
  5.   height: 100vh;
  6.   top: 0;
  7.   left: 0;
  8.   z-index: 100000;
  9.   box-sizing: border-box;
  10.   padding-top: 37.4vw;
  11.   display: flex;
  12.   flex-direction: column;
  13.   justify-content: flex-start;
  14.   align-items: center;
  15. }
  17. .toast .toast-wrapper {
  18.   padding: 5vw;
  19.   min-width: 18vw;
  20.   background-color: rgba(0, 0, 0, .63);
  21.   border-radius: 1.67vw;
  22.   display: flex;
  23.   flex-direction: column;
  24.   justify-content: flex-start;
  25.   align-items: center;
  26. }
  28. .toast .toast-wrapper .toast-icon {
  29.   width: 8vw;
  30.   height: 8vw;
  31.   line-height: 0;
  32.   margin-bottom: 2vw;
  33. }
  35. .toast .toast-wrapper .toast-content {
  36.   max-width: 65vw;
  37.   font-size: 3.73vw;
  38.   color: #fff;
  39.   line-height: 6.4vw;
  40. }
  42. .loading {
  43.   position: fixed;
  44.   width: 100vw;
  45.   height: 100vh;
  46.   top: 0;
  47.   left: 0;
  48.   z-index: 100000;
  49.   box-sizing: border-box;
  50.   padding-top: 37.4vw;
  51.   display: flex;
  52.   flex-direction: column;
  53.   justify-content: flex-start;
  54.   align-items: center;
  55. }
  57. .loading .loading-wrapper {
  58.   padding: 5vw;
  59.   min-width: 18vw;
  60.   background-color: rgba(0, 0, 0, .63);
  61.   border-radius: 1.67vw;
  62.   display: flex;
  63.   flex-direction: column;
  64.   justify-content: flex-start;
  65.   align-items: center;
  66. }
  68. .loading .loading-wrapper .loading-icon {
  69.   width: 12vw;
  70.   height: 12vw;
  71.   border-radius: 50%;
  72.   overflow: hidden;
  73.   line-height: 0;
  74.   margin-bottom: 2vw;
  75. }
  77. .loading .loading-wrapper .loading-content {
  78.   max-width: 65vw;
  79.   font-size: 3.73vw;
  80.   color: #fff;
  81.   line-height: 6.4vw;
  82. }
  84. .loading-btm {
  85.   display: none;
  86.   font-size: 3.2vw;
  87.   color: #999;
  88.   width: 100%;
  89.   height: 8vw;
  90.   line-height: 8vw;
  91.   text-align: center;
  92. }
  93. .nomore {
  94.   display: none;
  95.   font-size: 3.2vw;
  96.   color: #999;
  97.   width: 100%;
  98.   height: 8vw;
  99.   line-height: 8vw;
  100.   text-align: center;
  101. }
  103. .model {
  104.   position: fixed;
  105.   width: 100vw;
  106.   height: 100vh;
  107.   top: 0;
  108.   left: 0;
  109.   z-index: 100000;
  110.   box-sizing: border-box;
  111.   padding-top: 46vw;
  112.   display: flex;
  113.   flex-direction: column;
  114.   justify-content: flex-start;
  115.   align-items: center;
  116.   background-color: rgba(0, 0, 0, .3)
  117. }
  119. .model .model-wrapper {
  120.   width: 80vw;
  121.     background-color: #ffffff;
  122.     box-shadow: 0vw 0vw 3.2vw 0vw 
  123.         rgba(0, 0, 0, 0.05);
  124.   border-radius: 1.6vw;
  125.   overflow: hidden;
  127. }
  129. .model .model-wrapper .model-box {
  130.   width: 100%;
  131.   box-sizing: border-box;
  132.   padding: 9vw 8vw 6vw 8vw;
  133.   display: flex;
  134.   flex-direction: column;
  135.   justify-content: flex-start;
  136.   align-items: center;
  137. }
  139. .model .model-wrapper .model-box .model-icon {
  140.   width: 9.87vw;
  141.   height: auto;
  142.   line-height: 0;
  143.   margin-bottom: 5.2vw;
  144. }
  146. .model .model-wrapper .model-box .model-content {
  147.  font-size: 4.27vw; 
  148.  color: #333;
  149.  line-height: 5.6vw;
  150. }
  152. .model .model-wrapper .model-btns {
  153.   width: 100%;
  154.   display: flex;
  155.   flex-direction: row;
  156.   justify-content: space-between;
  157.   align-items: center;
  158.   border-top: 1px solid #e2e2e2;
  159. }
  161. .model .model-wrapper .model-btns .model-cancel {
  162.   box-sizing: border-box;
  163.   flex: 1;
  164.   height: 11.73vw;
  165.   line-height: 11.73vw;
  166.   text-align: center;
  167.   font-size: 4.8vw;
  168.   color: #999;
  169.   border-right: 1px solid #e2e2e2;
  170. }
  172. .model .model-wrapper .model-btns .model-confirm {
  173.   box-sizing: border-box;
  174.   flex: 1;
  175.   height: 11.73vw;
  176.   line-height: 11.73vw;
  177.   text-align: center;
  178.   font-size: 4.8vw;
  179.   color: #9966b4;
  180. }