layer彈窗插件操作的示例分析

這篇文章主要介紹了layer彈窗插件操作的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

具體如下：

1、首先去http://layer.layui.com/下載插件

2、在網站上有演示說明

3、操作方法如何

<script src="../js/layer/layer.js"></script>
<script>
function openadd()
{
   $str=$("#addModal").html();//加載彈窗內容
   layer.open({
    type: 1,        //彈窗類型
    title: '顯示標題',   //顯示標題 
    closeBtn: 1,     //是否顯示關閉按鈕
    shadeClose: true, //顯示模態窗口
    skin: 'layui-layer-rim', //加上邊框
    area: ['600px', '440px'], //寬高
    content: $str //彈窗內容
  });
}
</script>
<div id="addModal">
要彈窗顯示的內容
</div>

手機彈窗效果

//彈窗后兩秒自動關閉
layer.open({ 
content: '通過style設置你想要的樣式', 
style: 'background-color:#09C1FF; color:#fff; border:none;', 
time: 2 
});
//彈窗后點擊關閉
layer.open({ 
  btn: ['關閉'], 
  content:'內容' 
})

更多彈效果

特別說明：事件需自己綁定，以下只展現調用代碼。

//初體驗
layer.alert('內容')
//第三方擴展皮膚
layer.alert('內容', {
 icon: 1,
 skin: 'layer-ext-moon' //該皮膚由layer.seaning.com友情擴展。關于皮膚的擴展規則，去這里查閱
})
//詢問框
layer.confirm('您是如何看待前端開發？', {
 btn: ['重要','奇葩'] //按鈕
}, function(){
 layer.msg('的確很重要', {icon: 1});
}, function(){
 layer.msg('也可以這樣', {
  time: 20000, //20s后自動關閉
  btn: ['明白了', '知道了']
 });
});
//提示層
layer.msg('玩命提示中');
//墨綠深藍風
layer.alert('墨綠風格，點擊確認看深藍', {
 skin: 'layui-layer-molv' //樣式類名
 ,closeBtn: 0
}, function(){
 layer.alert('偶吧深藍style', {
  skin: 'layui-layer-lan'
  ,closeBtn: 0
  ,shift: 4 //動畫類型
 });
});
//捕獲頁
layer.open({
 type: 1,
 shade: false,
 title: false, //不顯示標題
 content: $('.layer_notice'), //捕獲的元素
 cancel: function(index){
  layer.close(index);
  this.content.show();
  layer.msg('捕獲就是從頁面已經存在的元素上，包裹layer的結構', {time: 5000, icon:6});
 }
});
//頁面層
layer.open({
 type: 1,
 skin: 'layui-layer-rim', //加上邊框
 area: ['420px', '240px'], //寬高
 content: 'html內容'
});
//自定頁
layer.open({
 type: 1,
 skin: 'layui-layer-demo', //樣式類名
 closeBtn: 0, //不顯示關閉按鈕
 shift: 2,
 shadeClose: true, //開啟遮罩關閉
 content: '內容'
});
//tips層
layer.tips('Hi，我是tips', '吸附元素選擇器，如#id');
//iframe層
layer.open({
 type: 2,
 title: 'layer mobile頁',
 shadeClose: true,
 shade: 0.8,
 area: ['380px', '90%'],
 content: 'http://layer.layui.com/mobile/' //iframe的url
}); 
//iframe窗
layer.open({
 type: 2,
 title: false,
 closeBtn: 0, //不顯示關閉按鈕
 shade: [0],
 area: ['340px', '215px'],
 offset: 'rb', //右下角彈出
 time: 2000, //2秒后自動關閉
 shift: 2,
 content: ['test/guodu.html', 'no'], //iframe的url，no代表不顯示滾動條
 end: function(){ //此處用于演示
  layer.open({
   type: 2,
   title: '很多時候，我們想最大化看，比如像這個頁面。',
   shadeClose: true,
   shade: false,
   maxmin: true, //開啟最大化最小化按鈕
   area: ['893px', '600px'],
   content: 'http://fly.layui.com/'
  });
 }
});
//加載層
var index = layer.load(0, {shade: false}); //0代表加載的風格，支持0-2
//loading層
var index = layer.load(1, {
 shade: [0.1,'#fff'] //0.1透明度的白色背景
});
//小tips
layer.tips('我是另外一個tips，只不過我長得跟之前那位稍有些不一樣。', '吸附元素選擇器', {
 tips: [1, '#3595CC'],
 time: 4000
});
//prompt層
layer.prompt({
 title: '輸入任何口令，并確認',
 formType: 1 //prompt風格，支持0-2
}, function(pass){
 layer.prompt({title: '隨便寫點啥，并確認', formType: 2}, function(text){
  layer.msg('演示完畢！您的口令：'+ pass +' 您最后寫下了：'+ text);
 });
});
//tab層
layer.tab({
 area: ['600px', '300px'],
 tab: [{
  title: 'TAB1', 
  content: '內容1'
 }, {
  title: 'TAB2', 
  content: '內容2'
 }, {
  title: 'TAB3', 
  content: '內容3'
 }]
});
//相冊層
$.getJSON('test/photos.json?v='+new Date, function(json){
 layer.photos({
  photos: json //格式見API文檔手冊頁
  ,shift: 5 //0-6的選擇，指定彈出圖片動畫類型，默認隨機
 });
});

感謝你能夠認真閱讀完這篇文章，希望小編分享的“layer彈窗插件操作的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!