2. 程式人生 > >JS 彈出框 jquery 彈出層

JS 彈出框 jquery 彈出層

阿新 • • 發佈：2018-11-21
               

幾種面板式樣

 

 

 

 

 

功能：

Js程式碼 複製程式碼  收藏程式碼
  1. //1. 傳入字串   
  2. art.dialog({   
  3.     content: 
    '我支援HTML'  
  4. });  
[js] view plain copy print ?
  1. //1. 傳入字串  
  2. art.dialog({  
  3.     content: '我支援HTML'  
  4. });  
//1. 傳入字串art.dialog({    content: '我支援HTML'});
 

效果：

 

 

Js程式碼 複製程式碼  收藏程式碼
  1. /*2. 傳入HTMLElement  
  2. 備註：1、元素不是複製而是完整移動到對話方塊中，所以原有的事件與屬性都將會保留 2、如果隱藏元素被傳入到對話方塊，會設定display:block屬性顯示該元素 3、對話方塊關閉的時候元素將恢復到原來在頁面的位置，style display屬性也將恢復 
  3. */  
  4. art.dialog({   
  5.     content: document.getElementById('demoCode_content_DOM'),   
  6.     id: 'EF893L'  
  7. });  
[js] view plain copy print ?
  1. /*2. 傳入HTMLElement 
  2. 備註：1、元素不是複製而是完整移動到對話方塊中，所以原有的事件與屬性都將會保留 2、如果隱藏元素被傳入到對話方塊，會設定display:block屬性顯示該元素 3、對話方塊關閉的時候元素將恢復到原來在頁面的位置，style display屬性也將恢復 
  3. */  
  4. art.dialog({  
  5.     content: document.getElementById('demoCode_content_DOM'),  
  6.     id: 'EF893L'  
  7. });  
/*2. 傳入HTMLElement備註：1、元素不是複製而是完整移動到對話方塊中，所以原有的事件與屬性都將會保留 2、如果隱藏元素被傳入到對話方塊，會設定display:block屬性顯示該元素 3、對話方塊關閉的時候元素將恢復到原來在頁面的位置，style display屬性也將恢復*/art.dialog({    content: document.getElementById('demoCode_content_DOM'),    id: 'EF893L'});

 效果：把指定的div載入到這個彈框上

 

 

Js程式碼 複製程式碼  收藏程式碼
  1. //標題 [title]   
  2. art.dialog({   
  3.     title: 'hello world!'  
  4. });  
[js] view plain copy print ?
  1. //標題 [title]  
  2. art.dialog({  
  3.     title: 'hello world!'  
  4. });  
//標題 [title]art.dialog({    title: 'hello world!'});

  效果：

 

 

Js程式碼 複製程式碼  收藏程式碼
  1. /*確定取消按鈕 [ok & cancel]  
  2. 備註：回撥函式this指向擴充套件介面，如果返回false將阻止對話方塊關閉*/  
  3. art.dialog({   
  4.     content: '如果定義了回撥函式才會出現相應的按鈕',   
  5.     ok: function () {   
  6.         this.title('3秒後自動關閉').time(3);   
  7.         return false;   
  8.     },   
  9.     cancelVal: '關閉',   
  10.     cancel: true //為true等價於function(){}  
  11. });  
[js] view plain copy print ?
  1. /*確定取消按鈕 [ok & cancel] 
  2. 備註：回撥函式this指向擴充套件介面，如果返回false將阻止對話方塊關閉*/  
  3. art.dialog({  
  4.     content: '如果定義了回撥函式才會出現相應的按鈕',  
  5.     ok: function () {  
  6.         this.title('3秒後自動關閉').time(3);  
  7.         return false;  
  8.     },  
  9.     cancelVal: '關閉',  
  10.     cancel: true //為true等價於function(){}  
  11. });  
/*確定取消按鈕 [ok & cancel]備註：回撥函式this指向擴充套件介面，如果返回false將阻止對話方塊關閉*/art.dialog({    content: '如果定義了回撥函式才會出現相應的按鈕',    ok: function () {     this.title('3秒後自動關閉').time(3);        return false;    },    cancelVal: '關閉',    cancel: true //為true等價於function(){}});
 

  效果：

 

Js程式碼 複製程式碼  收藏程式碼
  1. /*自定義按鈕 [button]  
  2. 備註：回撥函式this指向擴充套件介面，如果返回false將阻止對話方塊關閉；button引數對應的擴充套件方法名稱也是"button"*/  
  3. art.dialog({   
  4.     id: 'testID',   
  5.     content: 'hello world!',   
  6.     button: [   
  7.         {   
  8.             name: '同意',   
  9.             callback: function () {   
  10.                 this.content('你同意了').time(2);   
  11.                 return false;   
  12.             },   
  13.             focus: true  
  14.         },   
  15.         {   
  16.             name: '不同意',   
  17.             callback: function () {   
  18.                 alert('你不同意')   
  19.             }   
  20.         },   
  21.         {   
  22.             name: '無效按鈕',   
  23.             disabled: true  
  24.         },   
  25.         {   
  26.             name: '關閉我'  
  27.         }   
  28.     ]   
  29. });  
[js] view plain copy print ?
  1. /*自定義按鈕 [button] 
  2. 備註：回撥函式this指向擴充套件介面，如果返回false將阻止對話方塊關閉；button引數對應的擴充套件方法名稱也是"button"*/  
  3. art.dialog({  
  4.     id: 'testID',  
  5.     content: 'hello world!',  
  6.     button: [  
  7.         {  
  8.             name: '同意',  
  9.             callback: function () {  
  10.                 this.content('你同意了').time(2);  
  11.                 return false;  
  12.             },  
  13.             focus: true  
  14.         },  
  15.         {  
  16.             name: '不同意',  
  17.             callback: function () {  
  18.                 alert('你不同意')  
  19.             }  
  20.         },  
  21.         {  
  22.             name: '無效按鈕',  
  23.             disabled: true  
  24.         },  
  25.         {  
  26.             name: '關閉我'  
  27.         }  
  28.     ]  
  29. });  
/*自定義按鈕 [button]備註：回撥函式this指向擴充套件介面，如果返回false將阻止對話方塊關閉；button引數對應的擴充套件方法名稱也是"button"*/art.dialog({    id: 'testID',    content: 'hello world!',    button: [        {            name: '同意',            callback: function () {                this.content('你同意了').time(2);                return false;            },            focus: true        },        {            name: '不同意',            callback: function () {                alert('你不同意')            }        },        {            name: '無效按鈕',            disabled: true        },        {            name: '關閉我'        }    ]});

    效果：  

 

Js程式碼 複製程式碼  收藏程式碼
  1. //定時關閉的訊息 [time]   
  2. art.dialog({   
  3.     time: 2,   
  4.     content: '兩秒後關閉'  
  5. });  
[js] view plain copy print ?
  1. //定時關閉的訊息 [time]  
  2. art.dialog({  
  3.     time: 2,  
  4.     content: '兩秒後關閉'  
  5. });  
//定時關閉的訊息 [time]art.dialog({    time: 2,    content: '兩秒後關閉'});
 

  效果：  

 

 

Js程式碼 複製程式碼  收藏程式碼
  1. /*定義訊息圖示 [icon]  
  2. 請檢視skin/icons目錄下的圖示*/  
  3. art.dialog({   
  4.     icon: 'succeed',   
  5.     content: '我可以定義訊息圖示哦'  
  6. });  
[js] view plain copy print ?
  1. /*定義訊息圖示 [icon] 
  2. 請檢視skin/icons目錄下的圖示*/  
  3. art.dialog({  
  4.     icon: 'succeed',  
  5.     content: '我可以定義訊息圖示哦'  
  6. });  
/*定義訊息圖示 [icon]請檢視skin/icons目錄下的圖示*/art.dialog({    icon: 'succeed',    content: '我可以定義訊息圖示哦'});
 

 

  效果：

 

 

Js程式碼 複製程式碼  收藏程式碼
  1. //鎖屏 [lock & background & opacity]   
  2. art.dialog({   
  3.     lock: true,   
  4.     background: '#600', // 背景色  
  5.     opacity: 0.87,  // 透明度   
  6.     content: '中斷使用者在對話方塊以外的互動，展示重要操作與訊息',   
  7.     icon: 'error',   
  8.     ok: function () {   
  9.         art.dialog({content: '再來一個鎖屏', lock: true});   
  10.         return false;   
  11.     },   
  12.     cancel: true  
  13. });  
[js] view plain copy print ?
  1. //鎖屏 [lock & background & opacity]  
  2. art.dialog({  
  3.     lock: true,  
  4.     background: '#600', // 背景色  
  5.     opacity: 0.87,  // 透明度  
  6.     content: '中斷使用者在對話方塊以外的互動，展示重要操作與訊息',  
  7.     icon: 'error',  
  8.     ok: function () {  
  9.         art.dialog({content: '再來一個鎖屏', lock: true});  
  10.         return false;  
  11.     },  
  12.     cancel: true  
  13. });  
//鎖屏 [lock & background & opacity]art.dialog({    lock: true,    background: '#600', // 背景色    opacity: 0.87, // 透明度    content: '中斷使用者在對話方塊以外的互動，展示重要操作與訊息',    icon: 'error',    ok: function () {        art.dialog({content: '再來一個鎖屏', lock: true});        return false;    },    cancel: true});
 

 

  效果：這是個鎖屏的你可自定義背景顏色和圖示等等一些屬性

 

 

Js程式碼 複製程式碼  收藏程式碼
  1. //自定義座標 [left & top]   
  2. art.dialog({   
  3.     left: 100,   
  4.     top: '60%',   
  5.     content: '我改變座標了'  
  6. });  
[js] view plain copy print ?
  1. //自定義座標 [left & top]  
  2. art.dialog({  
  3.     left: 100,  
  4.     top: '60%',  
  5.     content: '我改變座標了'  
  6. });  
//自定義座標 [left & top]art.dialog({    left: 100,    top: '60%',    content: '我改變座標了'});
 

  效果：

 

Js程式碼 複製程式碼  收藏程式碼
  1. //建立一個全屏對話方塊   
  2. art.dialog({   
  3.     width: '100%',   
  4.     height: '100%',   
  5.     left: '0%',   
  6.     top: '0%',   
  7.     fixed: true,   
  8.     resize: false,   
  9.     drag: false  
  10. })  
[js] view plain copy print ?
  1. //建立一個全屏對話方塊  
  2. art.dialog({  
  3.     width: '100%',  
  4.     height: '100%',  
  5.     left: '0%',  
  6.     top: '0%',  
  7.     fixed: true,  
  8.     resize: false,  
  9.     drag: false  
  10. })  
//建立一個全屏對話方塊art.dialog({    width: '100%',    height: '100%',    left: '0%',    top: '0%',    fixed: true,    resize: false,    drag: false})

 效果：

 

Js程式碼 複製程式碼  收藏程式碼
  1. //右下角滑動通知   
  2. artDialog.notice = function (options) {   
  3.     var opt = options || {},   
  4.         api, aConfig, hide, wrap, top,   
  5.         duration = 800;   
  6.            
  7.     var config = {   
  8.         id: 'Notice',   
  9.         left: '100%',   
  10.         top: '100%',   
  11.         fixed: true,   
  12.         drag: false,   
  13.         resize: false,   
  14.         follow: null,   
  15.         lock: false,   
  16.         init: function(here){   
  17.             api = this;   
  18.             aConfig = api.config;   
  19.             wrap = api.DOM.wrap;   
  20.             top = parseInt(wrap[0].style.top);   
  21.             hide = top + wrap[0].offsetHeight;   
  22.                
  23.             wrap.css('top', hide + 'px')   
  24.                 .animate({top: top + 'px'}, duration, function () {   
  25.                     opt.init && opt.init.call(api, here);   
  26.                 });   
  27.         },   
  28.         close: function(here){   
  29.             wrap.animate({top: hide + 'px'}, duration, function () {   
  30.                 opt.close && opt.close.call(this, here);   
  31.                 aConfig.close = $.noop;   
  32.                 api.close();   
  33.             });   
  34.                
  35.             return false;   
  36.         }   
  37.     };     
  38.        
  39.     for (var i in opt) {   
  40.         if (config[i] === undefined) config[i] = opt[i];   
  41.     };   
  42.        
  43.     return artDialog(config);   
  44. };   
  45. //呼叫示例：   
  46. art.dialog.notice({   
  47.     title: '永珍網管',   
  48.     width: 220,// 必須指定一個畫素寬度值或者百分比，否則瀏覽器視窗改變可能//導致artDialog收縮  
  49.     content: '尊敬的顧客朋友，您IQ卡餘額不足10元，請及時充值',   
  50.     icon: 'face-sad',   
  51.     time: 5   
  52. });  
[js] view plain copy print ?
  1. //右下角滑動通知  
  2. artDialog.notice = function (options) {  
  3.     var opt = options || {},  
  4.         api, aConfig, hide, wrap, top,  
  5.         duration = 800;  
  6.           
  7.     var config = {  
  8.         id: 'Notice',  
  9.         left: '100%',  
  10.         top: '100%',  
  11.         fixed: true,  
  12.         drag: false,  
  13.         resize: false,  
  14.         follow: null,  
  15.         lock: false,  
  16.         init: function(here){  
  17.             api = this;  
  18.             aConfig = api.config;  
  19.             wrap = api.DOM.wrap;  
  20.             top = parseInt(wrap[0].style.top);  
  21.             hide = top + wrap[0].offsetHeight;  
  22.               
  23.             wrap.css('top', hide + 'px')  
  24.                 .animate({top: top + 'px'}, duration, function () {  
  25.                     opt.init && opt.init.call(api, here);  
  26.                 });  
  27.         },  
  28.         close: function(here){  
  29.             wrap.animate({top: hide + 'px'}, duration, function () {  
  30.                 opt.close && opt.close.call(this, here);  
  31.                 aConfig.close = $.noop;  
  32.                 api.close();  
  33.             });  
  34.               
  35.             return false;  
  36.         }  
  37.     };    
  38.       
  39.     for (var i in opt) {  
  40.         if (config[i] === undefined) config[i] = opt[i];  
  41.     };  
  42.       
  43.     return artDialog(config);  
  44. };  
  45. //呼叫示例：  
  46. art.dialog.notice({  
  47.     title: '永珍網管',  
  48.     width: 220,// 必須指定一個畫素寬度值或者百分比，否則瀏覽器視窗改變可能//導致artDialog收縮  
  49.     content: '尊敬的顧客朋友，您IQ卡餘額不足10元，請及時充值',  
  50.     icon: 'face-sad',  
  51.     time: 5  
  52. });  
//右下角滑動通知artDialog.notice = function (options) {    var opt = options || {},        api, aConfig, hide, wrap, top,        duration = 800;            var config = {        id: 'Notice',        left: '100%',        top: '100%',        fixed: true,        drag: false,        resize: false,        follow: null,        lock: false,        init: function(here){            api = this;            aConfig = api.config;            wrap = api.DOM.wrap;            top = parseInt(wrap[0].style.top);            hide = top + wrap[0].offsetHeight;                        wrap.css('top', hide + 'px')                .animate({top: top + 'px'}, duration, function () {                    opt.init && opt.init.call(api, here);                });        },        close: function(here){            wrap.animate({top: hide + 'px'}, duration, function () {                opt.close && opt.close.call(this, here);                aConfig.close = $.noop;                api.close();            });                        return false;        }    };         for (var i in opt) {        if (config[i] === undefined) config[i] = opt[i];    };        return artDialog(config);};//呼叫示例：art.dialog.notice({    title: '永珍網管',    width: 220,// 必須指定一個畫素寬度值或者百分比，否則瀏覽器視窗改變可能//導致artDialog收縮    content: '尊敬的顧客朋友，您IQ卡餘額不足10元，請及時充值',    icon: 'face-sad',    time: 5});

 

 

 

Js程式碼 複製程式碼  收藏程式碼
  1. //跨域訪問   
  2. //跨域訪問無法自適應大小，也無法進行父頁面與子頁面資料交換   
  3. art.dialog.open('http://www.connect.renren.com/igadget/renren/index.html',   
  4.     {title: '人人網', width: 320, height: 400});  
[js] view plain copy print ?
  1. //跨域訪問  

  2. 相關推薦

    JS 彈出框 jquery 彈出層

                    幾種面板式樣        

    JS 彈出框 jquery 彈出層

                    幾種面板式樣功能： Js程式碼  //1. 傳入字串 art.dialog({       content: '我支援HTML'});  [js] view plain copy print?//1. 傳入字串art.dialog({      content: '我支援HTM

    介面操作結果提示彈出框2--遮罩層效果

    js包含了html程式碼和顯示消失的功能，忽然想起來link可以去掉css的，因為在其他html介面裡會呼叫這些css樣式 suernk.js如下： //brace.html裡的三個彈出框,為了避免呼叫麻煩,將彈出框放到js裡 //document.write("<link rel='

    多個彈出框，彈出不同內容

    1、被點選的地方用同樣的class='test' 2、 $(".test").each(function(i,v){ var nodei = i; $(this).off("click").on("click",i,function(e){ var th

    springmvc Excel檔案上傳,使用ajaxSubmit方法進行檔案上傳,使用彈出層彈出一個框(jquery layer)，點選進行下載

    效果： 彈出層使用的是jquery外掛layer  外掛下載地址http://download.csdn.net/detail/rendeyishi/8048139 因為我是使用的是jquery裡面的ajaxSubmit進行檔案上傳 所以這個jquery.form.js必

    使用jquery-confirm優化JS彈出框

    jquery-confirm是一款可整合font-awesome，bootstrap一起使用的強大jQuery對話方塊和確認框外掛 css依賴 <link href="https://

    jquery封裝了一個簡潔輕巧的可拖動可自定義樣式的純div+css帶遮罩層的仿模態彈出框

            最近封裝上癮，想起以前做的一個輕巧的彈出框，是樣式和指令碼分離的，於是重新封裝了一下，把樣式標籤統一到js裡了。 裡面還有一些問題，但不影響使用，有興趣的同學，可以參考完善下，有好的建議，請不吝賜教。 if (typeof jQuery === 'unde

    js彈出框、對話框、提示框、彈窗總結

    js彈出框、對話框、提示框、彈窗總結一、JS的三種最常見的對話框//====================== JS最常用三種彈出對話框 ======================== //彈出對話框並輸出一段提示信息 function ale() { /

    JQuery 彈出層，始終顯示在屏幕正中間

    filter scrolltop rep 指定 mode spa -c target mod 1.讓層始終顯示在屏幕正中間： 樣式代碼： Html代碼 .model{ position: absolute; z-ind

    java方法裏面生成js彈出框

    核心 代碼 .get type con har javascrip java方法 彈出 核心代碼：方法參數要有response response.setContextType("text/html;charset=UTF-8"); PrintWrite out = re

    custombox.js 插件如何點空白處不隱藏彈出框 overlayClose屬性的應用

    tin dal clas lean prevent fec 彈出 false comm bootstrap中使用了custombox.js 插件，如下代碼 <button href="/systems/application/add" data-target="

    jQuery彈出層layer插件的使用

    layui scroll 彈出層 eight flow one max func 簡單 引入插件layer 觸發彈出層的按鈕/鏈接 <a href="javascript:showPop();"> <img src="" /> </a

    html、css和js原生寫一個模態彈出框，順便解決父元素半透明子元素不透明效果

    script javascrip z-index htm index 彈出 rgb 特性 radi 模態框： html部分： <!-- 按鈕 --> <button id="box" onclick="pop_box()">彈出框</

    ASP.NET—013：實現帶控件的彈出層（彈出框）

    btn script lock 技術分享 trac borde stat -s scroll 在頁面中用到彈出新頁面的情況比較多的，一般來說都是使用JS方法showM

    clipboard.js在彈出框中無法復制的問題

    con AS 類庫 dial ali oda focus 代碼 16px 前幾天發現了個bug，在jquery-ui的彈出框(dialog)中，使用clipboard.js實現的復制功能，竟然不會生效，後面查了下相關資料，發現不止jquery-ui的dialog不行，其他的

    jquery彈出框

    pos AD hid doctype play pan start nbsp position <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

    jquery-彈出層

    ges cti 關閉按鈕 pointer otto int flow lock 內容 html： <html><head> <meta charset="utf-8"> <title>jquery彈出層</title&g

    Js:消息彈出框、獲取時間區間、時間格式、easyui datebox 自定義校驗、表單數據轉化json、控制兩個日期不能只填一個

    gets pri ESS 大於等於 轉化 gpo 現在 undefine parent (function ($) { $.messageBox = function (message) { $.messager.show({

    jquery Bootstrap 彈出框（Popover）顯示html內容，URL，div等

    containe inpu lock ext ace src group mar 顯示 實現效果： 其實有個關鍵點： data-container="body" data-html="true" 註意下就可以了 <button type="button" class=

    JS三種彈出框（alert、confirm、prompt）

    <script> alert('hello');//彈框① 沒有返回值，返回undefined confirm("彈框②");//返回值為布林型別：true、false prompt("這是彈框③嗎？","是的");//帶輸入框的彈窗 </script>