layerui下載:http://www.layui.com
更多參數請閱讀開發文檔：http://www.layui.com/doc/modules/layer.html
Layui 是一款采用自身模塊規范編寫的情懷型前端UI框架，遵循原生HTML/CSS/JS的書寫與組織形式，門檻極低，拿來即用。其外在極簡，卻又不失飽滿的內在，體積輕盈，組件豐盈，從核心代碼到API的每一處細節都經過精心雕琢，非常適合界面的快速開發
1.引入js 和css
<script type="text/javascript" src="jquery-1.9.0.min.js"></script> <script type="text/javascript" src="layui.all.js"></script> <link rel="stylesheet" href="css/layui.css">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>layer</title>
<script type="text/javascript" src="jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="layui.all.js"></script>
<link rel="stylesheet" href="css/layui.css">
</head>
<body>
<div id="one">
<input type="button" value="確定">
<input id="b3" type="button" value="確定">
</div>
<script>
// layer.msg('hello');
// layer.msg('不開心。。', {icon: 5});
// layer.confirm('納尼？', {//自定義彈出框
// btn: ['按鈕一', '按鈕二', '按鈕三'] //可以無限個按鈕
// , btn3: function (index, layero) {
// //按鈕【按鈕三】的回調
// alert(333)
// }
// }, function (index, layero) {
// //按鈕【按鈕一】的回調
// alert(111)
// }, function (index) {
// //按鈕【按鈕二】的回調
// alert(222)
// });
$('input').click(function () {
layer.open({
id:0,//用於控制彈層唯一標識
area: ['600px', '400px'],
// offset: 'lt',//設置彈出框的位置
type:2,//layer提供了5種層類型。可傳入的值有：0（信息框，默認）1（頁面層）2（iframe層）3（加載層）4（tips層）。 若你采用layer.open({type: 1})方式調用，則type為必填項（信息框除外）
closeBtn:1,//設置關閉按鈕默認1 可設置參數0 1 2
shade:0.3,//遮罩 ：0.3
shadeClose:false,//是否點擊遮罩關閉 ,默認false
// time:5000,//自動關閉所需毫秒 默認：0 默認不會自動關閉。當你想自動關閉時，可以time: 5000，即代表5秒后自動關閉，
anim:0,//彈出動畫目前anim可支持的動畫類型有0-6 如果不想顯示動畫，設置 anim: -1 即可。另外需要注意的是，3.0之前的版本用的是 shift 參數
isOutAnim:true,//關閉動畫 （layer 3.0.3新增） 默認情況下，關閉層時會有一個過度動畫。如果你不想開啟，設置 isOutAnim: false 即可
maxmin:false,//該參數值對type:1和type:2有效。默認不顯示最大小化按鈕。需要顯示配置maxmin: true即可
fixed:true,//即鼠標滾動時，層是否固定在可視區域。如果不想，設置fixed: false即可
resize:false,//默認情況下，你可以在彈層右下角拖動來拉伸尺寸。如果對指定的彈層屏蔽該功能，設置 false即可。該參數對loading、tips層無效
scrollbar:true,//是否允許瀏覽器出現滾動條 默認允許瀏覽器滾動，如果設定scrollbar: false，則屏蔽
maxWidth:500,//默認：360 請注意：只有當area: 'auto'時，maxWidth的設定才有效。
maxHeight:800,// 默認：無 請注意：只有當高度自適應時，maxHeight的設定才有效。
zIndex:19891014,//默認：19891014 一般用於解決和其它組件的層疊沖突。
move:'.layui-layer-title',// 觸發拖動的元素 默認：'.layui-layer-title' 默認是觸發標題區域拖拽。如果你想單獨定義，指向元素的選擇器或者DOM即可。如move: '.mine-move'。你還配置設定move: false來禁止拖拽
// yes:function (index, layero) {//確定按鈕回調方法 該回調攜帶兩個參數，分別為當前層索引、當前層DOM對象。如：
// alert("確定后要做的事情");
// layer.close(index); //如果設定了yes回調，需進行手工關閉
// },
cancel:function (index, layero) {//右上角關閉按鈕觸發的回調 該回調攜帶兩個參數，分別為：當前層索引參數（index）、當前層的DOM對象（layero），默認會自動觸發關閉。如果不想關閉，return false即可
if(confirm('確定要關閉么')){ //只有當點擊confirm框的確定時，該層才會關閉 設置 type:2 closeBtn:2,
layer.close(index)
}
return false;
},
resizing:function () {
alert(111111)
},
title: "查看文章",
content: 'user.html',//這里content是一個URL，如果你不想讓iframe出現滾動條，你還可以content:
// success:function () {//層彈出后的成功回調方法
// alert("窗口彈出成功了！");
// }
});
});
//方法大全
//layer.open(options) - 原始核心方法
//-----------------------------------------------------------------------------------------------------
//1.layer.alert(content, options, yes) - 普通信息框 它的彈出似乎顯得有些高調，一般用於對用戶造成比較強烈的關注，類似系統alert，
// 但卻比alert更靈便。它的參數是自動向左補齊的。通過第二個參數，可以設定各種你所需要的基礎參數，但如果你不需要的話，直接寫回調即可
// layer.alert('有了回調', function(index){
// //do something
// alert(1111);
// layer.close(index);
// });
//-----------------------------------------------------------------------------------------------------
//2.layer.confirm(content, options, yes, cancel) - 詢問框 類似系統confirm，但卻遠勝confirm，
// 另外它不是和系統的confirm一樣阻塞你需要把交互的語句放在回調體中。同樣的，它的參數也是自動補齊的。
// layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){
// //do something
//
// layer.close(index);
// });
//-----------------------------------------------------------------------------------------------------
//3. layer.msg(content, options, end) - 提示框 我們在源碼中用了相對較大的篇幅來定制了這個msg，
// 目的是想將其打造成露臉率最高的提示框。而事實上我的確也在大量地使用它。
// 因為它簡單，而且足夠得自覺，它不僅占據很少的面積，而且默認還會3秒后自動消失所有這一切都決定了我對msg的愛。
// 因此我賦予了它許多可能在外形方面，它堅持簡陋的變化，在作用方面，它堅持零用戶操作。而且它的參數也是自動補齊的。
//eg1
// layer.msg('只想弱弱提示');
//eg2
// layer.msg('有表情地提示', {icon: 6});
//eg3
// layer.msg('關閉后想做些什么', function(){
// //do something
// });
//eg
// layer.msg('同上', {
// icon: 1,
// time: 2000 //2秒關閉（如果不配置，默認是3秒）
// }, function(){
// //do something
// });
//-----------------------------------------------------------------------------------------------------
//4.layer.load(icon, options) - 加載層 type:3的深度定制。load並不需要你傳太多的參數，但如果你不喜歡默認的加載風格，
// 你還有選擇空間。icon支持傳入0-2如果是0，無需傳。另外特別注意一點：load默認是不會自動關閉的，因為你一般會在ajax回調體中關閉它。
//eg1
// var index = layer.load();
//eg2
// var index = layer.load(1); //換了種風格
//eg3
// var index = layer.load(2, {time: 10*1000}); //又換了種風格，並且設定最長等待10秒
//關閉
// layer.close(index);
//-----------------------------------------------------------------------------------------------------
//layer.tips(content, follow, options) - tips層 type:4的深度定制。也是我本人比較喜歡的一個層類型，
// 因為它擁有和msg一樣的低調和自覺，而且會智能定位，即靈活地判斷它應該出現在哪邊。默認是在元素右邊彈出
//eg1
// layer.tips('只想提示地精准些', '#b3');
//eg 2
// $('#b3').on('click', function(){
// var that = this;
// layer.tips('只想提示地精准些', that); //在元素的事件回調體中，follow直接賦予this即可
// });
//eg 3
// layer.tips('在上面', '#b3', {
// tips: 1
// });
//-----------------------------------------------------------------------------------------------------
//layer.prompt(options, yes) - 輸入層 prompt的參數也是向前補齊的。options不僅可支持傳入基礎參數，還可以傳入prompt專用的屬性。當然，
// 也可以不傳。yes攜帶value 表單值index 索引elem 表單元素
// layer.prompt(function(value, index, elem){
// alert(value); //得到value
// layer.close(index);
// });
//-----------------------------------------------------------------------------------------------------
//layer.tab(options) - tab層 tab層只單獨定制了一個成員，即tab: []，例子
// layer.tab({
// area: ['600px', '300px'],
// tab: [{
// title: 'TAB1',
// content: '內容1'
// }, {
// title: 'TAB2',
// content: '內容2'
// }, {
// title: 'TAB3',
// content: '內容3'
// }]
// });
//-----------------------------------------------------------------------------------------------------
//layer.setTop(layero) -置頂當前窗口 非常強大的一個方法，雖然一般很少用。但是當你的頁面有很多很多layer窗口，
// 你需要像Window窗體那樣，點擊某個窗口，該窗體就置頂在上面，那么setTop可以來輕松實現。它采用巧妙的邏輯，以使這種置頂的性能達到最優
// layer.open({
// type: 2,
// shade: false,
// area: '500px',
// maxmin: true,
// content: 'http://www.layui.com',
// zIndex: layer.zIndex, //重點1
// success: function(layero){
// layer.setTop(layero); //重點2
// }
// });
</script>
</body>
</html>