Layer常用彈出框匯總

所屬分類:UI-彈出層,工具提示,標簽

 1826  13  查看評論 (1)
分享到微信朋友圈
X
Layer常用彈出框匯總 ie兼容12

Layer彈出框類[基于layer實現常用彈出框類]

@author Xqs

@date 2018.08.26

@version 1.0

layer提供了5種層類型。可傳入的值有:0(信息框,默認)1(頁面層)2(層)3(加載層)4(tips層)。

若你采用layer.open({type: 1})方式調用,則type為必填項(信息框除外)

var icon = -1;//圖標。信息框和加載層的私有參數。類型:Number,默認:-1(信息框)/0(加載層)
var time = 0;//自動關閉所需毫秒。類型:Number,默認:0默認不會自動關閉
var anim = 0;//彈出動畫。類型:Number。 取值:0 平滑放大(默認)、1從上掉落、2從最底部往上滑入、3從左滑入、4從左翻滾、5漸顯、6抖動
var loadingIndex;//加載層序號,便于關閉
layer.config({
   anim: 5, //默認動畫風格
   // skin: 'layui-layer-molv' //皮膚layui-layer-lan,layui-layer-molv(默認)
});
var dialog = {
   /**
    * #提示框 - layer.msg(content, options, end)
    */
   /**
    * 提示框[一些簡單的提示信息]
    * @param message 提示內容
    * @param icon icon
    * @param time 自動關閉所需毫秒(如果不配置,默認是3秒)
    * @param func 自動關閉后執行特定的函數 string(函數名),bool(false)表示不執行
    */
   msg : function(message, icon, time = 0, func = false){
       var index = layer.msg(message, {
           icon: icon,
           time: time, //3秒關閉
       }, function(){
           if(func != false){
               var f = eval(func);
           }
       });
   },
   /**
    * 提示框[帶按鈕的提示信息]
    * @param message 提示內容
    * @param icon icon取[-1,0,1,2,3,4,5,6]
    * @param btn 確定按鈕名稱,取消按鈕名稱
    * @param func 自動關閉后執行特定的函數 string(函數名),bool(false)表示不執行
    * @param time 自動關閉所需毫秒,這里不需要關閉(如果不配置,默認是0秒)
    */
   msgBtn : function(message, icon, func = false, btn = ['確定','取消'], time = 0){
       var index = layer.msg(message, {
           icon: icon,
           btn: btn,
           time: time,
           yes: function(){
               if(func != false){
                   var f = eval(func);
               }else{
                   layer.close(index);
               }
           }
       });
   },
   /**
    * #普通信息框 - layer.alert(content, options, yes)
    */
   /**
    * 普通信息框
    * @param message 提示內容
    * @param title 信息框標題,為false時不顯示標題
    * @param icon 圖標[0=>黃色?;1=>綠色?;2=>紅色?;3=>黃色?;4=>黑色??;5=>紅色?;6=>綠色??]
    * @param time 自動關閉所需毫秒,默認為0 表示不關閉
    */
    alert : function(title, content, icon = 0, func = false, time = 0){
       var index = layer.alert(content, {
           icon: icon,
           title: title,
           time: time
       },
       function(index){
           //do something
           if(func != false){
               var f = eval(func);
           }else{
               layer.close(index);
           }
       });
    },
   /**
    * #詢問框 - layer.confirm(content, options, yes, cancel)
    */
   /**
    * 詢問框
    * @param message 提示內容
    * @param title 信息框標題,為false時不顯示標題
    * @param icon 圖標[0=>黃色?;1=>綠色?;2=>紅色?;3=>黃色?;4=>黑色??;5=>紅色?;6=>綠色??]
    * @param yes 點擊確定按鈕后執行的函數名,如不需執行傳入false即可。
    * @param no 點擊取消按鈕后執行的函數名,如不需執行傳入false即可。
    * @param time 自動關閉所需毫秒,默認為0 表示不關閉
    */
   confirm : function(title, content, icon = 0, yes = false, no = false, time = 0){
       var index = layer.confirm(content, {
           icon: 3,
           title: title,
           time: time
       },
       function(index){
           //do something
           if(yes != false){
               var f = eval(yes);
           }else{
               layer.close(index);
           }
       },
       function(index){
           //do something
           if(no != false){
               var f = eval(no);
           }else{
               layer.close(index);
           }
       });
   },
   /**
    * #加載層 - layer.load(icon, options)
    */
   /**
    * 加載層
    * @param message 提示內容
    * @param title 信息框標題,為false時不顯示標題
    * @param icon 加載圖標
    * @param time 自動關閉所需毫秒,默認為0 表示不關閉
    */
    load : function(icon, func, time = 0){
       var index = layer.load(icon, {
           time: time,
           // shade: [opacity, color] //0.1透明度的白色背景
       });
    },
   /**
    * #tips層 - layer.tips(content, follow, options)
    */
   /**
    * tips層
    * @param id 
    * @param content 提示內容
    * @param tips 
    * @param color 
    */
    tips : function(id, content, tips = 1, color = '#000000'){
       layer.tips(content, id, {
           tips: [tips, color],
           tipsMore: true
       });
    },
   /**
    * #輸入層 - layer.prompt(options, yes)
    */
   /**
    * 輸入層
    * @param formType //輸入框類型,支持0(文本)默認1(密碼)2(多行文本)
    * @param title 輸入層標題,為false時不顯示標題
    * @param value 初始時的值,默認空字符 
    * @param area 自定義文本域寬高,formType為2時有效
    * @param maxlength: 140, //可輸入文本的最大長度,默認500
    */
   prompt : function(formType = 1, title = false, value = '', func =false, area = []){
       layer.prompt({
           formType: formType,
           value: value,
           title: title,
           area: area //自定義文本域寬高
       }, function(value, index, elem){
           alert(area);
           //do something
           if(func != false){
               console.log(value); //得到value
               var f = eval(func);
           }else{
               layer.close(index);
           }
       });
   },
   /**
    * #tab層 - layer.tab(options)
    * 此層開發難度較大,不適合作為通用案例。請按需開發
    */
   /**
    * tab層
    * @param formType //輸入框類型,支持0(文本)默認1(密碼)2(多行文本)
    * @param title 輸入層標題,為false時不顯示標題
    * @param value 初始時的值,默認空字符 
    * @param area 自定義文本域寬高,formType為2時有效
    * @param maxlength: 140, //可輸入文本的最大長度,默認500
    */
    tab : function(){
       layer.tab({
           area: ['600px', '300px'],
               tab: [{
               title: 'TAB1', 
               content: '內容1'
           }, {
               title: 'TAB2', 
               content: '內容2'
           }, {
               title: 'TAB3', 
               content: '內容3'
           }]
           }); 
    },
   /** 信息框[type:0]
   icon: 0-6
   **/
   /**
    * 成功彈出框[一般用于操作成功且不需要跳轉的提示]
    * @param message 提示內容
    * @param title 信息框標題
    * @param level 提示級別
    * @param time 自動關閉所需毫秒,默認為0 表示不關閉
    */
   success : function(message, title = '', time = 0) {
       if(typeof(title) == "undefined" || title == false || title.trim() == 0 || title.trim() == ''){
           title = '信息';
       }
       layer.open({
           type: 0,
           icon: 1,
           title: title,
           content: message,
           time : time,
       });
   },
   /**
    * 信息彈出框[一般用于普通操作的提示]
    * @param message 提示內容
    * @param title 信息框標題
    * @param time 自動關閉所需毫秒,默認為0 表示不關閉
    */
    info : function(message, title = '', time = 0){
       if(typeof(title) == "undefined" || title == false || title.trim() == 0 || title.trim() == ''){
           title = '信息提示';
       }
       layer.open({
           type : 0,
           icon : 0,
           title : title,
           content : message,
           time : time,
       });
    },
   /**
    * 警告彈出框[一般用于警告提示]
    * @param message 提示內容
    * @param title 信息框標題
    * @param time 自動關閉所需毫秒,默認為0 表示不關閉
    */
    warming : function(message, title = '', time = 0){
       if(typeof(title) == "undefined" || title == false || title.trim() == 0 || title.trim() == ''){
           title = '警告提示';
       }
       layer.open({
           type : 0,
           icon : 5,
           title : title,
           content : message,
           time : time,
       });
    },
   /**
    * 錯誤彈出框[一般用于操作出現錯誤時的提示]
    * @param message 提示內容
    * @param title 信息框標題
    * @param time 自動關閉所需毫秒,默認為0 表示不關閉
    */
   error : function(message, title = '', time = 0) {
       if(typeof(title) == "undefined" || title == false || title.trim() == 0 || title.trim() == ''){
           title = '錯誤提示';
       }
       layer.open({
           type : 0,
           icon : 2,
           title : title,
           content : message,
           time : time,
       });
   },
   /**
    * 成功彈出框[一般用于操作成功且需要跳轉的提示]
    * @param message 提示內容
    * @param url 點擊確認后跳轉的URL鏈接
    * @param title 信息框標題
    * @param time 自動關閉所需毫秒,默認為0 表示不關閉
    */
   successGo : function(message, url, title = '', time = 0) {
       if(typeof(title) == "undefined" || title == false || title.trim() == 0 || title.trim() == ''){
           title = '信息';
       }
       layer.open({
           type: 0,
           icon: 1,
           title: title,
           content: message,
           time : time,
           yes: function(){
               location.href = url;
           },
           cancel: function(index, layero){
               layer.close(index)
               return false;
           },
       });
   },
   /**
    * 信息彈出框[一般用于普通操作之后需要跳轉的提示]
    * @param message 提示內容
    * @param url 點擊確認后跳轉的URL鏈接
    * @param title 信息框標題
    * @param time 自動關閉所需毫秒,默認為0 表示不關閉
    */
    infoGo : function(message, url, title = '', time = 0){
       if(typeof(title) == "undefined" || title == false || title.trim() == 0 || title.trim() == ''){
           title = '信息提示';
       }
       layer.open({
           type : 0,
           icon : 0,
           title : title,
           content : message,
           time : time,
           yes: function(){
               location.href = url;
           },
           cancel: function(index, layero){
               layer.close(index)
               return false;
           },
       });
    },
   /**
    * 警告彈出框[一般用于警告提示之后需要跳轉的提示]
    * @param message 提示內容
    * @param url 點擊確認后跳轉的URL鏈接
    * @param title 信息框標題
    * @param time 自動關閉所需毫秒,默認為0 表示不關閉
    */
    warmingGo : function(message, url, title = '', time = 0){
       if(typeof(title) == "undefined" || title == false || title.trim() == 0 || title.trim() == ''){
           title = '警告提示';
       }
       layer.open({
           type : 0,
           icon : 5,
           title : title,
           content : message,
           time : time,
           yes: function(){
               location.href = url;
           },
           cancel: function(index, layero){
               layer.close(index)
               return false;
           },
       });
    },
   /**
    * 錯誤彈出框[一般用于操作出現錯誤之后需要跳轉的提示]
    * @param message 提示內容
    * @param url 點擊確認后跳轉的URL鏈接
    * @param title 信息框標題
    * @param time 自動關閉所需毫秒,默認為0 表示不關閉
    */
   errorGo : function(message, url, title = '', time = 0) {
       if(typeof(title) == "undefined" || title == false || title.trim() == 0 || title.trim() == ''){
           title = '錯誤提示';
       }
       layer.open({
           type : 0,
           icon : 2,
           title : title,
           content : message,
           time : time,
           yes: function(){
               location.href = url;
           },
           cancel: function(index, layero){
               layer.close(index)
               return false;
           },
       });
   },
   /**
    * #詢問框 - layer.confirm(content, options, yes, cancel)
    */
   /**
    * 詢問框[]
    * @param message 提示內容
    * @param icon icon
    * @param time 自動關閉所需毫秒(如果不配置,默認是3秒)
    * @param func 自動關閉后執行特定的函數 string(函數名),bool(false)表示不執行
    */
    // confirm : function(){
    //    layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){
    //        //do something
    //        layer.close(index);
    //    });
    // },
   /**
    * 確認彈出層[無需跳轉到指定頁面的確認彈出層,一般用于確認之后執行之后的操作]
    * @param message 提示內容
    * @param url 點擊確認后跳轉的URL鏈接
    * @param title 信息框標題
    * @param time 自動關閉所需毫秒,默認為0 表示不關閉
    */
   confirms : function(message) {
       layer.open({
           type: 0,
           icon: 3,
           content: message,
           btn: ['是','否'],
           yes: function(){
               alert('需要執行的操作!');
           },
           cancel: function(index, layero){
               layer.close(index)
               return false;
           },
       });
   },
   /**
    * 確認彈出層[一般用于確認之后需要跳轉]
    * @param message 提示內容
    * @param url 點擊確認后跳轉的URL鏈接
    * @param title 信息框標題
    * @param time 自動關閉所需毫秒,默認為0 表示不關閉
    */
   confirmsGo : function(message, url, title = '', time = 0) {
       layer.open({
           type: 0,
           icon: 3,
           content: message,
           time : time,
           btn: ['是','否'],
           yes: function(){
               location.href = url;
           },
           cancel: function(index, layero){
               layer.close(index)
               return false;
           },
       });
   },
   
   /** 加載層 - layer.load(icon, options) **/
   /**
    * 加載層[]
    * @param type 取值為0-2,默認為0
    * @param color 背景顏色
    * @param opacity 背景顏色透明度
    */
   loading : function(type, color, opacity){
       if(typeof(type) == "undefined" || type == false || type.trim() == 0 || type.trim() == ''){
           type = 0;
       }
       if(typeof(color) == "undefined" || color == false || color.trim() == 0 || color.trim() == ''){
           color = '#333';
       }
       if(typeof(opacity) == "undefined" || opacity == false || opacity.trim() == 0 || opacity.trim() == ''){
           opacity = '0.6';
       }
       index = layer.load(type, {
           shade: [opacity, color] //0.1透明度的白色背景
       });
   },
   /** 窗 **/
   /**
    * 窗[]
    * @param title 標題 string('這是標題'),為false則不顯示
    * @param url 地址 string('http://www.baidu.com')
    * @param width 寬度 string('100px')
    * @param height 高度 string('100px')
    * @param full 是否全屏 bool(true/false)
    */
    : function(title, url, width, height, full){
       var index = layer.open({
           type: 2,
           title: title,//title: false,
           content: [url, 'yes'], //的url,no代表不顯示滾動條
           area: [width, height],//['893px', '600px'],
           // offset: [
           //     ($(window).height()-height)/2,
           //     ($(window).width()-width)/2
           // ],
           closeBtn: 1, //1顯示關閉按鈕,0不顯示關閉按鈕
           maxmin: true, //開啟最大化最小化按鈕
           shade: [0],//shade: false,//不顯示遮罩
           shadeClose: false,//點擊空白區域關閉
           // offset: 'rb', //右下角彈出
           // time: 0, //2秒后自動關閉
           // anim: 1,//動畫方式,默認0平滑放大,1從上掉落,2從最底部往上滑入,3從左滑入,4從左翻滾,5漸顯,6抖動.
           // end: function(){
           // }
       });
       if(full){
           layer.full(index);
       }
   }
}
相關插件-彈出層,工具提示,標簽

懸浮九宮格菜單jQuery插件

懸浮九宮格菜單jQuery插件
  彈出層
 30504  219

一款簡單實用的彈窗插件JMask(原創)

JMask是一款遮罩插件,其小巧靈活,在項目開發中方便實用。使用方式也特別簡單,只需要引入一個js文件,該插件基于JQuery開發,所以使用之前需要引入JQuery文件。
  彈出層
 23846  149

jQuery遮罩彈窗居中

jQuery遮罩彈窗始終屏幕劇中,調用簡單代碼少。
  彈出層
 35989  255

jQuery圖像展示插件Strip

Strip是Lightbox的一種,它只能部分覆蓋頁面。這樣就不會占用大的屏幕面積,適用于比較小的移動設備
  彈出層
 19197  162

討論這個項目(1)回答他人問題或分享插件使用方法獎勵jQ幣

    專家123 0
    2019/6/29 23:04:27
取消回復
  短信接口
河北时时彩投注站