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

創(chuàng)新互聯(lián)為企業(yè)級(jí)客戶提高一站式互聯(lián)網(wǎng)+設(shè)計(jì)服務(wù)，主要包括成都網(wǎng)站建設(shè)、成都做網(wǎng)站、app軟件定制開發(fā)、小程序開發(fā)、宣傳片制作、LOGO設(shè)計(jì)等，幫助客戶快速提升營(yíng)銷能力和企業(yè)形象，創(chuàng)新互聯(lián)各部門都有經(jīng)驗(yàn)豐富的經(jīng)驗(yàn)，可以確保每一個(gè)作品的質(zhì)量和創(chuàng)作周期，同時(shí)每年都有很多新員工加入，為我們帶來(lái)大量新的創(chuàng)意。 

具體如下：

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

2、在網(wǎng)站上有演示說(shuō)明

3、操作方法如何

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

手機(jī)彈窗效果

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

更多彈效果

特別說(shuō)明：事件需自己綁定，以下只展現(xiàn)調(diào)用代碼。

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“l(fā)ayer彈窗插件操作的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

網(wǎng)站題目：layer彈窗插件操作的示例分析
網(wǎng)站地址：http://chinadenli.net/article38/gsgjpp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、網(wǎng)頁(yè)設(shè)計(jì)公司、軟件開發(fā)、網(wǎng)站排名、網(wǎng)站改版、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)