layer彈出層組件主要在web平臺上有著極為廣泛的應(yīng)用，因為其簡單的代碼、穩(wěn)定的性能而深受廣大技術(shù)人員的喜歡，可以兼容支持基本上所有的瀏覽器。

組件介紹

歷年來備受青睞的Web彈出層組件，具備全方位的解決方案，面向各個水平段的開發(fā)人員，您的頁面會輕松地?fù)碛胸S富友好的操作體驗。它盡可能地在以更少的代碼展現(xiàn)更強(qiáng)健的功能，且格外注重性能的提升、易用和實用性，甚至還兼容了包括IE6在內(nèi)的所有主流瀏覽器。其數(shù)量可觀的基礎(chǔ)屬性和方法，使得您可以自定義太多您需要的風(fēng)格，每一種彈層模式各具特色，廣受歡迎。

應(yīng)用場景

layui模塊化使用

如果你使用的是 layui，那么你直接在官網(wǎng)下載 layui 框架即可，無需引入 jQuery 和 layer.js，但需要引入layui.css和layui.js

作為獨立組件使用

‍

如果你只是單獨想使用 layer，你可以去 layer 獨立版本官網(wǎng)下載組件包。你需要在你的頁面引入jQuery1.8以上的任意版本，并引入layer.js。

layer皮膚制作說明

第一步：命名文件夾

在layer的skin目錄建立一個文件夾，假設(shè)您將該文件夾命名為：yourskin

第二步：創(chuàng)建樣式等文件

在yourskin文件夾下建立一個單獨的樣式文件，務(wù)必命名為：style.css。并且你可能用到的圖片也要存放在該文件夾下

第三步：書寫樣式

1. 務(wù)必在第一行加上這句：

/* 選擇器格式為：html #layui_layer_skin文件夾名stylecss，這一點非常重要 */

html #layui_layer_skinyourskinstylecss{display:none; position: absolute; width:1989px;}

2. 繼續(xù)書寫務(wù)必遵循這種格式：

body .layer-ext-yourskin .layui-layer-title{}

body .layui-ext-yourskin .layui-layer-btn{}

body .layui-ext-yourskin .layui-layer-btn a{}

/*  你可以通過調(diào)試工具重置更多樣式 */

第四步：調(diào)試

通過全局配置看看你的皮膚定義的如何：

layer.config({

   extend: ['skin/myskin/style.css'], //加載您的擴(kuò)展樣式

   skin: 'layer-ext-yourskin'

});

layer.alert('layer皮膚-Yourskin');

第五步：發(fā)布

1. 現(xiàn)在你已經(jīng)成功制作了一個皮膚了，如果你覺得它很美，你可以共享出更多的人使用。

2. 那么你應(yīng)該制作一個簡單的頁面來介紹你的皮膚，提供盡可能簡單的使用說明。

3. 然后將制作好的皮膚發(fā)送給官方郵箱。

更新日志

3.5.1

[優(yōu)化] 局部樣式細(xì)節(jié)

[修復(fù)] layer.photos 層在 iframe 頁面中通過 parent 無法彈出的歷史彌久問題

3.5.0

[優(yōu)化] 當(dāng)點擊最小化時，讓遮罩消失，窗口還原時恢復(fù)遮罩

[優(yōu)化] 容器構(gòu)建的核心代碼，以解決自 3.3 以來在特殊場景下存在的某些異常問題

[新增] minStack 參數(shù)，用于控制最小化后是否默認(rèn)堆疊在左下角

3.4.0

[優(yōu)化] layer 組件的 close 和 closeAll 方法，第二個參數(shù)可傳入回調(diào)，用于層被關(guān)閉后的操作

[修復(fù)] layer 組件的 photos 層對動態(tài)生成的圖片無法識別的問題

[修復(fù)] layer 組件在 Ajax 等場景下，存在概率性無法關(guān)閉層的問題

[優(yōu)化] layer 組件的 photos 相關(guān)樣式，上下切換圖標(biāo)調(diào)整到頁面左右邊緣，圖片描述和序號調(diào)整到頁面底部