1、最基本的三種彈窗
alert，confirm，prompt
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js三種彈窗</title>
</head>
<body>
<span onclick="doson(1)">alert()</span>
<span onclick="doson(2)">confirm(option)</span>
<span onclick="doson(3)">prompt(option1,[option2])</span>
</body>
<script>
function doson(num){
if(num == 1){
alert("這是一Alert");
}else if( num == 2){
//返回一個布爾值，點擊確定返回true,點擊取消返回false
var isbeauty = confirm("準備好，遊山玩水了嗎？");
if(isbeauty){
alert("OK， Let's Go now !");
}else{
alert("不再考慮考慮了");
}
}else{
//option1：數據類型是字符串；是彈框裏的提示文字。
//option2：數據類型是字符串；是彈框裏輸入框的value預留值,第二個參數爲空時，彈框輸入框中的值爲空。
//返回一個輸入框的內容
var tess = prompt("當山峯沒有棱角的時候，你就開始好嗎？");
alert(tess);
}
}
</script>
</html>
2、lhgDialog彈窗提示窗口
lhgDialog是一個功能強大且兼容面廣的對話框組件，它擁有精緻的界面與友好的接口
兼容：IE6+、Firefox、Chrome、Safari、Opera以及iPad等移動設備。並且IE6下也能支持現代瀏覽器的靜止定位(fixed)、覆蓋下拉控件、alpha通道png背景。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>LghDialog彈框</title>
<script type="text/javascript" src="lghdialog_js/jquery.min.js" ></script>
<script type="text/javascript" src="lghdialog_js/lhgdialog.js" ></script>
</head>
<body>
<a onclick="lghdialog()">優雅</a>
</body>
<script>
//具體方法
function lghdialog(){
var dialog = $.dialog({
title: '歡迎',
content: '歡迎使用lhgdialog對話框組件！',
icon: 'success.gif',
ok: function(){
this.title('警告').content('請注意lhgdialog兩秒後將關閉！').lock().time(2);
return false;
}
});
}
</script>
</html>
窗口lhgdialog.min.js文件的url參數
A 參數形式爲：
<script type="text/javascript" src="lhgdialog.min.js?self=true&skin=chrome"></script>self：指定彈出窗口的頁面
類型：String
默認：'false'
說明：此參數只用在框架頁面中，如果不寫此參數或值爲false時則窗口跨框架彈出在框架最頂層頁面，如果值爲true則不跨框架，而在當前面頁彈出。
skin：多皮膚共享CSS文件名
類型：String
默認：'default'
說明：不寫此參數則值爲default。如果你想在同一頁面使用不同皮膚的窗口，此處的值就爲多皮膚共存的CSS的文件名
url參數不需要設定的就可以不寫，不寫時就使用默認值。
B 按鈕相關
ok：確定按鈕回調函數
類型：Function|Boolean
默認：null
說明：函數如果返回false將阻止對話框關閉；函數this指針指向內部api；如果傳入true表示只顯示有關閉功能的按鈕
cancel：取消按鈕回調函數
類型：Function|Boolean
默認：null
說明：1.函數如果返回false將阻止對話框關閉；函數this指針指向內部api；
2.如果傳入true表示只顯示有關閉功能的按鈕，標題欄的關閉按鈕其實就是取消按鈕，點擊同樣觸發cancel事件
3.如果值爲false時則隱藏標題欄右邊的關閉按鈕
okVal：確定按鈕文字
類型：String
默認：確定
cancelVal：取消按鈕文字
類型：String
默認：取消
min：是否顯示最小化按鈕
類型：Boolean
默認：true
max：是否顯示最大化按鈕
類型：Boolean
默認：true
button：自定義按鈕
類型：Array
默認：null
說明：
配置參數成員：
name —— 按鈕名稱
callback —— 按下後執行的函數
focus —— 是否聚焦點
disabled —— 是否標記按鈕爲不可用狀態（後續可使用擴展方法讓其恢復可用狀態）
示例：
參數如：[{name: '登錄', callback: function () {}}, {name: '取消'}] 。注意點擊按鈕默認會觸發按鈕關閉動作，需要阻止觸發關閉請讓回調函數返回false
C 尺寸相關
width：指定窗口的寬度
類型：Number|String
默認：'auto'
說明：1. 設置窗口的寬度，可以帶單位。一般不需要設置此，對話框框架會自己適應內容
2.如果設置爲百分值單位，將會以根據瀏覽器可視範圍作爲基準，此時如果瀏覽器窗口大小被改變其也會進行相應的調整
height：指定窗口的高度
類型：Number|String
默認：'auto'
說明：1.設置窗口的高度，可以帶單位。
2.如果設置爲百分值單位，將會以根據瀏覽器可視範圍作爲基準，此時如果瀏覽器窗口大小被改變其也會進行相應的調整
minWidth：最小寬度限制
類型：Number
默認：96
說明：此參數值只能爲數字
minHeight：最小高度限制
類型：Number
默認：32
說明：此參數值只能爲數字
D 位置相關
fixed：開啓靜止定位
類型：Boolean
默認：false
說明：靜止定位是css2.1的一個屬性，它靜止在瀏覽器某個地方不動，也不受滾動條拖動影響
left：相對於可視區域的X軸的座標
類型：Number|String
默認：'50%'
說明：可以使用'0%' ~ '100%'作爲相對座標，如果瀏覽器窗口大小被改變其也會進行相應的調整
top：相對於可視區域的Y軸的座標
類型：Number|String
默認：'50%'
說明：可以使用'0%' ~ '100%'作爲相對座標，如果瀏覽器窗口大小被改變其也會進行相應的調整
E 交互相關
time：設置對話框顯示時間
類型：Number
默認：null
說明：以秒爲單位
resize：是否允許用戶調節尺寸
類型：Boolean
默認：true
drag：是否允許用戶拖動位置
類型：Boolean
默認：true
esc：是否允許用戶按Esc鍵關閉對話框
類型：Boolean
默認：true
說明：只有窗口獲得焦點後才能使用此功能
cache：是否緩存iframe方式加載的窗口內容頁
類型：Boolean
默認：true
說明：只有使用iframe方式加載的單獨頁面的內容時此參數纔有效
extendDrag：是否開啓增強拖拽體驗
類型：Boolean
默認：true
說明：1.此屬性爲全局性設置，不能在窗口調用的參數裏設置，只能使用lhgdialog.setting.extendDrag來設置
2.防止鼠標落入iframe導致不流暢，對超大對話框拖動優化
F 視覺相關
lock：開啓鎖屏
類型：Boolean
默認：false
說明：中斷用戶對話框之外的交互，用於顯示非常重要的操作/消息，所以不建議頻繁使用它，它會讓操作變得繁瑣
background：鎖屏遮罩顏色
類型：String
默認：'#FFF'
說明：請注意這是一個會影響到全局的配置，後續出現的對話框的遮罩顏色都和此設置一樣，再設置不再起作用
opacity：鎖屏遮罩透明度
類型：Number
默認：.5
說明：請注意這是一個會影響到全局的配置，後續出現的對話框的遮罩透明度都和此設置一樣，再設置不再起作用
icon：定義消息圖標
類型：String
默認：null
說明：可定義“skins/icons/”目錄下的圖標名作爲參數名（一定要包含後綴名）
titleIcon：標題欄左邊的小圖標
類型：String
默認：null
說明：可定義“skins/icons/”目錄下的圖標名作爲參數名（一定要包含後綴名）
padding：內容與邊界填充邊距(即css padding)
類型：String
默認：'15px 10px'
說明：如果內容頁爲iframe方式加載的則在css裏需要設置爲0，要不在IE6中易出問題
skin：多皮膚共存時指定的皮膚樣式
類型：String
默認：''
說明：指定窗口要使用的皮膚的主類名
G 高級相關
id：設定對話框唯一標識
類型：String|Number
默認：null
說明：1.防止重複彈出
2.定義id後可以使用this.get(youID)和lhgdialog.list[youID]獲取擴展方法
zIndex：重置全局zIndex初始值
類型：Number
默認：1976
說明：用來改變對話框疊加高度，請注意這是一個會影響到全局的配置，後續出現的對話框疊加高度將重新按此累加。
init：對話框彈出後執行的函數
類型：Function
默認：null
說明：如果是以iframe方式加載的內容頁此函數會在內容頁加載完成後執行
close：對話框關閉前執行的函數
類型：Function
默認：null
說明：函數如果返回false將阻止對話框關閉。請注意這不是關閉按鈕的回調函數，無論何種方式關閉對話框，close都將執行。
parent：打開子窗口的父窗口對象
類型：Object
默認：null
說明：此參數只用在打開多層窗口都使用遮罩層時纔會用到此參數，注意多層窗口鎖屏時一定要加此參數
窗口實例對象內部方法
close()：關閉對話框
參數：無
說明：在需要關閉窗口時可調用此方法
reload(win,url)：刷新或跳轉指定的頁面
參數1：指定的要刷新或跳轉的頁面的window對象
參數2：要跳轉到的頁面地址
show()：顯示對話框
參數：無
hide()：隱藏對話框
參數：無
title(value)：寫入標題
參數1：標題的文本
說明：無參數則返回創建的窗口對象實例
content(value)：向窗口中寫入內容
參數1：窗口中的內容
說明：如果參數的前3個字符爲'url:'參使用iframe方式加載單獨的內容頁，無參數則返回創建的窗口對象實例
button(arguments)：插入一個自定義按鈕
參數1：name -- 按鈕名稱
參數2：callback -- 按下後執行的函數
參數3：focus -- 是否聚焦點
參數4：disabled -- 是否標記按鈕爲不可用狀態（後續可使用擴展方法讓其恢復可用狀態）
說明：此參數爲多個對象
示例：
button({
name: '登錄',
focus: true,
callback: function(){}
},{
name: '取消'
});
position(left,top)：重新定位對話框
參數1：X軸的座標
參數2：Y軸的座標
說明：參數可以爲數字或帶單位的字符如：'200px'或使用'0%' ~ '100%'作爲相對座標
size(width,height)：重新設定對話框大小
參數1：窗口的寬度
參數2：窗口的高度
說明：參數可以爲數字或帶單位的字符如：'200px'或使用'0%' ~ '100%'百分值單位
max()：最大化窗口
參數：無
min()：最小化窗口
參數：無
lock()：鎖屏
參數：無
unlock()：解鎖
參數：無
time(val,callback)：定時關閉（單位秒）
參數1：數值，以秒爲單位
參數2：回調函數
說明：參數2爲窗口關閉前執行的函數
focus() ：自動設置窗口中焦點元素
參數：無
zindex() ：置頂窗口
參數：無
get(id,object) ：根據指定id獲取相應的對象
參數1：窗口的id
參數2：是否返回的是窗口實例對象
說明：參數2的值只有爲數字1時才返回指定id的窗口的實例對象
api：內容頁中調用窗口實例對象接口
說明：此對象屬性是附加在iframe元素的一個屬性，在iframe方式加載的內容頁中通過調用此函數來獲取窗口的實例對象，示例：var api = frameElement.api; 注：此句代碼是加在iframe方式加載的內容頁中的，一定要注意
opener：加載窗口組件頁面的window對象
說明：此屬性主要用在iframe方式加載的內容頁中，示例：var api = frameElement.api, W = api.opener; 此時的W即爲加載窗口組件頁面的window對象
iframe：iframe方式加載內容的iframe對象
說明：此屬性主要用於在窗口組件調用頁面操作窗口中的iframe對象
iwin：iframe方式加載內容頁的window對象
說明：此屬性主要用於在窗口組件調用頁面操作窗口中的window對象，示例：var dg = $.dialog({'url:content.html',init:function(){ if( this.iwin.document.body ) alert('窗口內容頁加載完成'); });
窗口外部方法
$.dialog.focus：獲取焦點的窗口實例對象
說明：可以使用此屬性獲取兒得焦點的窗口的對象，示例：var dg = $.dialog.focus; 此時的dg就是當前焦點窗口的對象實例
$.dialog.list：所有窗口對象實例的集合
說明：通過此屬性可獲取所有打開的窗口對象，示例：關閉頁面所有對話框
var list = $.dialog.list;
for( var i in list ){
list[i].close();
}
$.dialog.top：獲取lhgdialog可用最高層window對象
說明：這與直接使用window.top不同，它能排除url參數self爲true時定義的頂層頁面爲調用窗口組件頁面或者頂層頁面爲框架集的情況
$.dialog.data(name,value)：跨框架數據共享寫入接口
參數1：存儲的數據名
參數2：將要存儲的任意數據(無此項則返回被查詢的數據，如果此值爲false就刪除指定名稱的數據)
說明：框架與框架之間以及與主頁面之間進行數據交換是非常頭疼的事情，常規情況下你必須知道框架的名稱才能進行數據交換，如果是在複雜的多層框架下操作簡直就是噩夢。
而data方法就是爲了解決這個問題，你完全不用管框架層級問題，它可以寫入任何類型的數據，而做到各個頁面之間數據共享。
擴展的一些提示性的窗口
$.dialog.alert(content,callback)：警告消息
參數1：內容
參數2：窗口關閉時執行的回調函數
$.dialog.confirm(content,yes,no)：確認
參數1：內容
參數2：確定按鈕回調函數
參數3：取消按鈕回調函數
$.dialog.prompt(content,yes,value)：提問
參數1：內容
參數2：確定按鈕回調函數
參數3：文本框默認值
$.dialog.tips(content,time,icon,callback)：短暫提示
參數1：內容
參數2：顯示時間
參數3：提示圖標
參數4：提示關閉時執行的函數
$.dialog.load(url,options,cache)：Ajax填充內容
參數1：地址
參數2：配置參數
參數3：是否允許緩存. 默認false
3 優化Jquery彈框
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>優化jQuery提示框</title>
<link href="./jquery_cj/Fytx_Tips.css" rel="stylesheet" type="text/css">
<script src="./jquery_cj/jquery-1.10.2.js"></script>
<script src="./jquery_cj/jquery.min.js"></script>
<!--彈框顏色 -->
<script type="text/javascript" src="./jquery_cj/Fytx_Tips_Config.js"></script>
<script type="text/javascript" src="./jquery_cj/Fytx_Tips.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#alertbtn").click(function() {
$.alert("提示信息", "這個是彈出alert框！");
});
$("#confirmbtn").click(function() {
$.confirm("提示信息", "這個是彈出confirm框！");
});
$.isok = function() {
alert("點擊了確定按鈕！");
}
$.iscancel = function() {
alert("點擊了取消按鈕！");
}
$("#toastbtn").click(function() {
$.toast("這個是彈出toast框！");
});
});
</script>
</head>
<body style="zoom: 1;">
<p align="center">
<input type="button" value="彈出alert框" id="alertbtn">
<input type="button" value="彈出confirm框" id="confirmbtn">
<input type="button" value="彈出toast框" id="toastbtn">
</p>
</body>
</html>Fytx_Tips_Config.js
var _fytx_alert_bg = 0.3;
var _fytx_alert_bgcolor = "#000000";
var _fytx_alert_box_bgcolor = "#ffffff";
var _fytx_alert_title_color = "#333333";
var _fytx_alert_titleline_color = "#3475f5";
var _fytx_alert_message_color = "#333333";
var _fytx_alert_btn_color = "#ffffff";
var _fytx_alert_btn_bgcolor = "#3475f5";
var _fytx_confirm_bg = 0.3;
var _fytx_confirm_bgcolor = "#000000";
var _fytx_confirm_box_bgcolor = "#ffffff";
var _fytx_confirm_title_color = "#333333";
var _fytx_confirm_titleline_color = "#3475f5";
var _fytx_confirm_message_color = "#333333";
var _fytx_confirm_okbtn_color = "#ffffff";
var _fytx_confirm_okbtn_bgcolor = "#3475f5";
var _fytx_confirm_cancelbtn_color = "#333333";
var _fytx_confirm_cancelbtn_bgcolor = "#ffffff";
var _fytx_toast_bg = 0.3;
var _fytx_toast_bgcolor = "#000000";
var _fytx_toast_box_bg = 0.5;
var _fytx_toast_box_bgcolor = "#000000";
var _fytx_toast_color = "#ffffff";
var _fytx_toast_close = true;Fytx_Tips.css
@charset "UTF-8";
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0
}
.fytx_alert_background {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .3);
position: fixed;
top: 0;
left: 0;
z-index: 999999
}
.fytx_alert_background .fytx_alert_box {
width: 452px;
height: auto;
padding: 0 15px 20px;
box-sizing: border-box;
background: #fff;
border-radius: 8px;
position: relative;
top: 50%;
left: 50%;
margin: -167px 0 0 -226px
}
.fytx_alert_background .fytx_alert_title {
width: 100%;
height: 45px;
border-bottom: 1px solid #99bafa;
font-size: 16px;
color: #333;
line-height: 45px;
text-align: center
}
.fytx_alert_background .fytx_alert_message {
width: 100%;
height: auto;
overflow: hidden;
padding: 25px 40px 35px;
text-align: center;
font-size: 16px;
color: #333;
box-sizing: border-box;
line-height: 28px
}
.fytx_alert_background .fytx_alert_btn {
display: block;
width: 100px;
height: 34px;
line-height: 34px;
background-color: #3475f5;
cursor: pointer;
font-size: 14px;
color: #fff;
border-radius: 4px;
border: 1px solid transparent;
margin: 0 auto;
text-align: center
}
.fytx_confirm_background {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .3);
position: fixed;
top: 0;
left: 0;
z-index: 999999
}
.fytx_confirm_background .fytx_confirm_box {
width: 452px;
height: auto;
padding: 0 15px 20px;
box-sizing: border-box;
background: #fff;
border-radius: 8px;
position: relative;
top: 50%;
left: 50%;
margin: -167px 0 0 -226px
}
.fytx_confirm_background .fytx_confirm_title {
width: 100%;
height: 45px;
border-bottom: 1px solid #99bafa;
font-size: 16px;
color: #333;
line-height: 45px;
text-align: center
}
.fytx_confirm_background .fytx_confirm_message {
width: 100%;
height: auto;
overflow: hidden;
padding: 25px 40px 35px;
text-align: center;
font-size: 16px;
color: #333;
box-sizing: border-box;
line-height: 28px
}
.fytx_confirm_background .fytx_confirm_okbtn {
display: inline-block;
width: 100px;
height: 34px;
line-height: 34px;
background-color: #3475f5;
cursor: pointer;
font-size: 14px;
color: #fff;
border-radius: 4px;
border: 1px solid transparent;
text-align: center;
margin-left: 84px;
margin-right: 47px
}
.fytx_confirm_background .fytx_confirm_cancelbtn {
display: inline-block;
width: 100px;
height: 34px;
line-height: 34px;
background: fff;
cursor: pointer;
font-size: 14px;
color: #3475f5;
border-radius: 4px;
border: 1px solid transparent;
text-align: center;
border: 1px solid #3475f5
}
.fytx_toast_background {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .3);
position: fixed;
top: 0;
left: 0;
z-index: 999999
}
.fytx_toast_background .fytx_toast_box {
width: 452px;
height: auto;
cursor: pointer;
padding: 15px 20px;
text-align: center;
background: rgba(0, 0, 0, .5);
color: #fff;
font-size: 16px;
border-radius: 8px;
line-height: 24px;
position: relative;
top: 50%;
left: 50%;
margin: 0 0 0 -226px
}Fytx_Tips.js
var _fytx_toast_box = "";
var _fytx_toast_background = "";
var _fytx_toast_time = 0;
function Fytx_Tips() {
var _this = this;
_fytx_toast_background = $('<div class="fytx_toast_background"></div>');
_this.Fytx_alert = function(obj) {
if($("div").is(".fytx_alert_background")) $('.fytx_alert_background').remove();
var _fytx_alert_background = '<div class="fytx_alert_background"><div class="fytx_alert_box">' + '<div class="fytx_alert_title">' + obj.title + '</div>' + '<div class="fytx_alert_message">' + obj.message + '</div>' + '<span class="fytx_alert_btn">確定</span>' + '</div></div>';
$('body').append(_fytx_alert_background);
if(_fytx_alert_bg != "") {
var fytx_bgcolor = $.hextorgb(_fytx_alert_bgcolor);
$('.fytx_alert_background').css("background", "rgb(" + fytx_bgcolor + "," + _fytx_alert_bg + ")");
}
if(_fytx_alert_box_bgcolor != "") $('.fytx_alert_box').css("background-color", _fytx_alert_box_bgcolor);
if(_fytx_alert_title_color != "") $('.fytx_alert_title').css("color", _fytx_alert_title_color);
if(_fytx_alert_titleline_color != "") $('.fytx_alert_title').css("border-bottom", _fytx_alert_titleline_color + " 1px solid");
if(_fytx_alert_message_color != "") $('.fytx_alert_message').css("color", _fytx_alert_message_color);
if(_fytx_alert_btn_bgcolor != "") $('.fytx_alert_btn').css("background-color", _fytx_alert_btn_bgcolor);
if(_fytx_alert_btn_color != "") $('.fytx_alert_btn').css("color", _fytx_alert_btn_color);
}
_this.Fytx_confirm = function(obj) {
if($("div").is(".fytx_confirm_background")) $('.fytx_confirm_background').remove();
var _fytx_confirm_background = '<div class="fytx_confirm_background"><div class="fytx_confirm_box"><div class="fytx_confirm_title">' + obj.title + '</div><div class="fytx_confirm_message">' + obj.message + '</div><span class="fytx_confirm_okbtn">確定</span><span class="fytx_confirm_cancelbtn">取消</span></div></div>';
$('body').append(_fytx_confirm_background);
if(_fytx_confirm_bg != "") {
var fytx_bgcolor = $.hextorgb(_fytx_confirm_bgcolor);
$('.fytx_confirm_background').css("background", "rgb(" + fytx_bgcolor + "," + _fytx_confirm_bg + ")");
}
if(_fytx_confirm_box_bgcolor != "") $('.fytx_confirm_box').css("background-color", _fytx_confirm_box_bgcolor);
if(_fytx_confirm_title_color != "") $('.fytx_confirm_title').css("color", _fytx_confirm_title_color);
if(_fytx_confirm_titleline_color != "") $('.fytx_confirm_title').css("border-bottom", _fytx_confirm_titleline_color + " 1px solid");
if(_fytx_confirm_message_color != "") $('.fytx_confirm_message').css("color", _fytx_confirm_message_color);
if(_fytx_confirm_okbtn_bgcolor != "") $('.fytx_confirm_okbtn').css("background-color", _fytx_confirm_okbtn_bgcolor);
if(_fytx_confirm_okbtn_color != "") $('.fytx_confirm_okbtn').css("color", _fytx_confirm_okbtn_color);
if(_fytx_confirm_cancelbtn_bgcolor != "") $('.fytx_confirm_cancelbtn').css("background-color", _fytx_confirm_cancelbtn_bgcolor);
if(_fytx_confirm_cancelbtn_color != "") $('.fytx_confirm_cancelbtn').css("color", _fytx_confirm_cancelbtn_color);
}, _this.Fytx_toast = function(mes, time) {
if(!_fytx_toast_background.is(':hidden')) _fytx_toast_box.remove();
_fytx_toast_box = $('<div class="fytx_toast_box">' + mes + '</div>');
_fytx_toast_background.append(_fytx_toast_box);
$('body').append(_fytx_toast_background);
_fytx_toast_box.css({
'marginTop': -_fytx_toast_box.outerHeight() / 2 + 'px'
});
if(_fytx_toast_bg != "") {
var fytx_bgcolor = $.hextorgb(_fytx_toast_bgcolor);
$('.fytx_toast_background').css("background", "rgb(" + fytx_bgcolor + "," + _fytx_toast_bg + ")");
}
if(_fytx_toast_box_bg != "") {
var fytx_bgcolors = $.hextorgb(_fytx_toast_box_bgcolor);
$('.fytx_toast_box').css("background", "rgb(" + fytx_bgcolors + "," + _fytx_toast_box_bg + ")");
}
if(_fytx_toast_color != "") $('.fytx_toast_box').css("color", _fytx_toast_color);
if(time > 0) {
var Etimer = null;
clearInterval(Etimer);
_fytx_toast_time = time;
Etimer = setInterval(function() {
_fytx_toast_time--;
if(_fytx_toast_time <= 0) {
clearInterval(Etimer);
_fytx_toast_background.remove();
_fytx_toast_box.remove();
}
}, 1000);
}
}, _this.Fytx_removetoast = function() {
_fytx_toast_background.remove();
_fytx_toast_box.remove();
}, $("body").on("click", ".fytx_toast_box", function() {
if(_fytx_toast_time > 0 && _fytx_toast_close) {
_fytx_toast_background.remove();
_fytx_toast_box.remove();
_fytx_toast_time = 0;
}
});
}
$(document).ready(function() {
var _fytx_confirm_isokstr = "";
var _fytx_confirm_iscancelstr = "";
var Fytx = new Fytx_Tips();
$.alert = function(title, msg) {
Fytx.Fytx_alert({
title: title,
message: msg
})
}, $("body").on("click", ".fytx_alert_btn", function() {
$(".fytx_alert_background").hide();
});
$.confirm = function(title, msg, isokstr, iscancelstr) {
_fytx_confirm_isokstr = arguments[2] ? arguments[2] : "";
_fytx_confirm_iscancelstr = arguments[3] ? arguments[3] : "";
Fytx.Fytx_confirm({
title: title,
message: msg
});
}, $("body").on("click", ".fytx_confirm_okbtn", function() {
$(".fytx_confirm_background").hide();
if(typeof $.isok === "function") {
if(_fytx_confirm_isokstr == "") {
$.isok();
} else {
$.isok(_fytx_confirm_isokstr);
}
}
});
$("body").on("click", ".fytx_confirm_cancelbtn", function() {
$(".fytx_confirm_background").hide();
if(typeof $.iscancel === "function") {
if(_fytx_confirm_iscancelstr == "") {
$.iscancel();
} else {
$.iscancel(_fytx_confirm_iscancelstr);
}
}
});
$.toast = function(msg, time, state) {
time = arguments[1] ? arguments[1] : ((arguments[1] == 0) ? 0 : 3);
state = arguments[2] ? arguments[2] : ((arguments[2] == 0) ? 0 : undefined);
if(state != undefined) {
if(state == 1) {
_fytx_toast_close = true;
} else if(state == 0) {
_fytx_toast_close = false;
} else {
_fytx_toast_close = state;
}
}
Fytx.Fytx_toast(msg, time);
}, $.removetoast = function() {
Fytx.Fytx_removetoast();
}
$.hextorgb = function(str) {
if(str != "") {
str = str.replace("#", "");
if(str.length == 3) str = str.substr(0, 1) + str.substr(0, 1) + str.substr(1, 1) + str.substr(1, 1) + str.substr(2, 1) + str.substr(2, 1);
var hex = str.match(/../g);
for(var i = 0; i < 3; i++) hex[i] = parseInt(hex[i], 16);
return hex;
} else {
return "0,0,0";
}
}
});4 layer一個讓你想到即可做到的Web彈窗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Layer</title>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="layer/layer.js" ></script>
<style>
a{
color: #FD482C;
}
</style>
</head>
<body>
<div id="frozen_redant">
<ol type="A">
<li>望着天下起了雪</li>
<li>滿天的雪花是那麼浪漫</li>
<li>對你的愛就像那片雪花</li>
<li>散落一地</li>
</ol>
</div>
<a onclick="layer_dialog(1)">初體驗</a>
<a onclick="layer_dialog(2)">皮膚</a>
<a onclick="layer_dialog(3)">詢問</a>
<a onclick="layer_dialog(4)">提示</a>
<a onclick="layer_dialog(5)">切換風格</a>
<a onclick="layer_dialog(6)">捕獲</a>
<a onclick="layer_dialog(7)">頁面</a>
<a onclick="layer_dialog(8)">自定義</a>
<a id="xifu" onclick="layer_dialog(9)">吸附tips</a>
<a onclick="layer_dialog(10)">url其他頁面</a>
<a onclick="layer_dialog(11)">url其他窗</a>
<a onclick="layer_dialog(12)">正在加載</a>
<a onclick="layer_dialog(13)">加載中....</a>
<a id="oherxifu" onclick="layer_dialog(14)">小tips</a>
<a onclick="layer_dialog(15)">prompt層</a>
<a onclick="layer_dialog(16)">tab標籤</a>
<hr />
<span style="color: indianred;">提示信息</span>
<a onclick="layer_dialog(17)">demo1</a>
<a onclick="layer_dialog(18)">demo2</a>
<a onclick="layer_dialog(19)">demo3</a>
<a onclick="layer_dialog(20)">demo4</a>
<a onclick="layer_dialog(21)">demo5</a>
<hr/>
<span style="color: indianred;">加載中</span>
<a onclick="layer_dialog(22)">demo1</a>
<a onclick="layer_dialog(23)">demo2</a>
<a onclick="layer_dialog(24)">demo3</a>
<a onclick="layer_dialog(25)">demo4</a>
<a onclick="layer_dialog(26)">demo5</a>
<hr />
<span style="color: indianred;">彈窗設置</span>
<a id="wuxian" onclick="layer_dialog(27)">無限彈窗</a>
<a onclick="layer_dialog(28)">透明詢問框</a>
</body>
<script>
function layer_dialog(num){
switch (num){
case 28:
//配置一個透明的詢問框
layer.msg('大部分參數都是可以公用的<br>合理搭配，展示不一樣的風格', {
time: 20000, //20s後自動關閉
btn: ['明白了', '知道了', '哦']
});
break;
case 27:
//多窗口模式，層疊置頂
layer.open({
type: 2 //此處以iframe舉例
,title: '當你選擇該窗體時，即會在最頂端'
,area: ['390px', '330px']
,shade: 0
,offset: [ //爲了演示，隨機座標
Math.random()*($(window).height()-300)
,Math.random()*($(window).width()-390)
]
,maxmin: true
,content: 'https://blog.51cto.com/13479739/2493634'
,btn: ['繼續彈出', '全部關閉'] //只是爲了演示
,yes: function(){
$("#wuxian").click(); //此處只是爲了演示，實際使用可以剔除
}
,btn2: function(){
layer.closeAll();
}
,zIndex: layer.zIndex //重點1
,success: function(layero){
layer.setTop(layero); //重點2
}
});
break;
case 22:
//加載層-默認風格
layer.load();
break;
case 23:
//加載層-風格2
layer.load(1);
break;
case 24:
//加載層-風格3
layer.load(2);
break;
case 25:
//加載層-風格4
layer.msg('加載中', {
icon: 16
,shade: 0.01
});
break;
case 26:
//打醬油
layer.msg('打個醬油', {icon: 4});
break;
case 17:
//信息框-例1
layer.alert('見到你真的很高興', {icon: 6});
break;
case 18:
//信息框-例2
layer.msg('你確定你很帥麼？', {
time: 0 //不自動關閉
,btn: ['必須啊', '醜到爆']
,yes: function(index){
layer.close(index);
layer.msg('雅蠛蝶 O.o', {
icon: 6
,btn: ['嗷','嗷','嗷']
});
}
});
break;
case 19:
//信息框-例3
layer.msg('這是最常用的吧');
break;
case 20:
//信息框-例4
layer.msg('不開心。。', {icon: 5});
break;
case 21:
//信息框-例5
layer.msg('玩命賣萌中', function(){
//關閉後的操作
});
break;
case 16:
//tab層
layer.tab({
area: ['600px', '300px'],
tab: [{
title: 'TAB1',
content: '頁面顯示的內容<br/>頁面顯示的內容<br/>'
}, {
title: 'TAB2',
content: '錢呢女女'
}, {
title: 'TAB3',
content: '內容3'
}]
});
break;
case 15:
//prompt層
layer.prompt({title: '輸入任何口令，並確認', formType: 1}, function(pass, index){
layer.close(index);
layer.prompt({title: '隨便寫點啥，並確認', formType: 2}, function(text, index){
layer.close(index);
layer.msg('演示完畢！您的口令：'+ pass +'<br>您最後寫下了：'+text);
});
});
break;
case 14:
//小tips
layer.tips('我是另外一個tips，只不過我長得跟之前那位稍有些不一樣。', '#oherxifu', {
//1上 默認右，3下 4左
tips: [1, '#3595CC'],
time: 4000
});
break;
case 13:
//loading層
var index = layer.load(1, {
shade: [0.1,'#fff'] //0.1透明度的白色背景
});
break;
case 12:
//加載層
var index = layer.load(0, {shade: false}); //0代表加載的風格，支持0-2
break;
case 11:
//iframe窗
layer.open({
type: 2,
title: false,
closeBtn: 0, //不顯示關閉按鈕
shade: [0],
area: ['340px', '215px'],
offset: 'rb', //右下角彈出
time: 2000, //2秒後自動關閉
anim: 2,
content: ['https://blog.51cto.com/13479739', 'no'], //iframe的url，no代表不顯示滾動條
end: function(){ //此處用於演示
layer.open({
type: 2,
title: '很多時候，我們想最大化看，比如像這個頁面。',
shadeClose: true,
shade: false,
maxmin: true, //開啓最大化最小化按鈕
area: ['893px', '600px'],
content: '//blog.51cto.com/13479739/2493634'
});
}
});
break;
case 10:
//iframe層
layer.open({
type: 2,
title: 'layer mobile頁',
shadeClose: true,
shade: 0.8,
area: ['380px', '70%'],
content: '1.html/' //iframe的url
});
break;
case 9:
//tips層
layer.tips('我是tips,我吸附在這個元素上！！！', '#xifu');
break;
case 1://第一個LayUI彈框
layer.alert('這是你的第一個LayUI彈框');
break;
case 2://第三方拓展皮膚
layer.alert('第三方拓展皮膚', {
icon: 1,
skin: 'layer-ext-moon' //[《Layer皮膚製作說明》](https://layer.layui.com/skin.html#publish)
})
break;
case 3:
//詢問框
layer.confirm('願意和俺一起，遊山玩水，巴山夜雨嗎？', {
btn: ['可以','不行'] //按鈕
}, function(){
layer.msg('就這麼約定了', {icon: 1});
}, function(){
layer.msg('怎麼能這樣，再想想', {
time: 20000, //20s後自動關閉
btn: ['明白了', '知道了']
});
});
break;
case 4:
//提示層
layer.msg('給我點提示吧！');
break;
case 5:
//墨綠深藍風
layer.alert('墨綠風格，點擊確認看深藍', {
skin: 'layui-layer-molv' //樣式類名
,closeBtn: 0
}, function(){
layer.alert('偶吧深藍style', {
skin: 'layui-layer-lan'
,closeBtn: 0
,anim: 4 //動畫類型
});
});
break;
case 6:
//捕獲頁
layer.open({
type: 1,
shade: false,
title: false, //不顯示標題
//捕獲的元素
content: $('#frozen_redant'),
cancel: function(){
layer.msg('捕獲就是從頁面已經存在的元素上，包裹layer的結構', {time: 5000, icon:6});
}
});
break;
case 7:
//頁面層
layer.open({
type: 1,
skin: 'layui-layer-rim', //加上邊框
area: ['420px', '240px'], //寬高
content: '這裏是html頁面的內容'
});
break;
case 8:
//自定頁
layer.open({
type: 1,
skin: 'layer-ext-moon', //樣式類名
closeBtn: 0, //不顯示關閉按鈕
anim: 2,
shadeClose: true, //開啓遮罩關閉
content: '即傳入skin:"樣式名"，然後你就可以爲所欲爲了。你怎麼樣給她整容都行'
});
break;
default:
break;
}
}
</script>
</html>
【PS：每個按鈕，這裏就不點了，自己點去吧】