模態框(layer)
阿新 • • 發佈:2018-07-26
play 打醬油 htm more obi clas prompt 得到 layer
推薦一個好看的模態框(layer) 地址:http://layer.layui.com/
相應列子及配置 全部來自於官網,可直接訪問官網學習了解。
-
//信息框-例1
- layer.alert(‘見到你真的很高興‘, {icon: 6});
-
//信息框-例2
- layer.msg(‘你確定你很帥麽?‘, {
- time: 0 //不自動關閉
- ,btn: [‘必須啊‘, ‘醜到爆‘]
- ,yes: function(index){
- layer.close(index);
- layer.msg(‘雅蠛蝶 O.o‘, {
- icon: 6
- ,btn: [‘嗷‘,‘嗷‘,‘嗷‘]
- });
- }
- });
-
//信息框-例3
- layer.msg(‘這是最常用的吧‘);
-
//信息框-例4
- layer.msg(‘不開心。。‘, {icon: 5});
-
//信息框-例5
- layer.msg(‘玩命賣萌中‘, function(){
- //關閉後的操作
- });
-
//頁面層-自定義
- layer.open({
- type: 1,
- title: false,
- closeBtn: 0,
- shadeClose: true,
- skin: ‘yourclass‘,
- content: ‘自定義HTML內容‘
- });
-
//頁面層-佟麗婭
- layer.open({
- type: 1,
- title: false,
- closeBtn: 0,
- area: ‘516px‘,
- skin: ‘layui-layer-nobg‘, //沒有背景色
- shadeClose: true,
- content: $(‘#tong‘)
- });
-
//iframe層-父子操作
- layer.open({
- type: 2,
- area: [‘700px‘, ‘450px‘],
- fixed: false, //不固定
- maxmin: true,
- content: ‘test/iframe.html‘
- });
-
//iframe層-多媒體
- layer.open({
- type: 2,
- title: false,
- area: [‘630px‘, ‘360px‘],
- shade: 0.8,
- closeBtn: 0,
- shadeClose: true,
- content: ‘//player.youku.com/embed/XMjY3MzgzODg0‘
- });
- layer.msg(‘點擊任意處關閉‘);
-
//iframe層-禁滾動條
- layer.open({
- type: 2,
- area: [‘360px‘, ‘500px‘],
- skin: ‘layui-layer-rim‘, //加上邊框
- content: [‘mobile/‘, ‘no‘]
- });
-
//加載層-默認風格
- layer.load();
- //此處演示關閉
- setTimeout(function(){
- layer.closeAll(‘loading‘);
- }, 2000);
-
//加載層-風格2
- layer.load(1);
- //此處演示關閉
- setTimeout(function(){
- layer.closeAll(‘loading‘);
- }, 2000);
-
//加載層-風格3
- layer.load(2);
- //此處演示關閉
- setTimeout(function(){
- layer.closeAll(‘loading‘);
- }, 2000);
-
//加載層-風格4
- layer.msg(‘加載中‘, {
- icon: 16
- ,shade: 0.01
- });
-
//打醬油
- layer.msg(‘尼瑪,打個醬油‘, {icon: 4});
-
//tips層-上
- layer.tips(‘上‘, ‘#id或者.class‘, {
- tips: [1, ‘#0FA6D8‘] //還可配置顏色
- });
-
//tips層-右
- layer.tips(‘默認就是向右的‘, ‘#id或者.class‘);
-
//tips層-下
- layer.tips(‘下‘, ‘#id或者.class‘, {
- tips: 3
- });
-
//tips層-左
- layer.tips(‘左邊麽麽噠‘, ‘#id或者.class‘, {
- tips: [4, ‘#78BA32‘]
- });
-
//tips層-不銷毀之前的
- layer.tips(‘不銷毀之前的‘, ‘#id或者.class‘, {
- tipsMore: true
- });
-
//默認prompt
- layer.prompt(function(val, index){
- layer.msg(‘得到了‘+val);
- layer.close(index);
- });
-
//屏蔽瀏覽器滾動條
- layer.open({
- content: ‘瀏覽器滾動條已鎖‘,
- scrollbar: false
- });
-
//彈出即全屏
- var index = layer.open({
- type: 2,
- content: ‘http://layim.layui.com‘,
- area: [‘320px‘, ‘195px‘],
- maxmin: true
- });
- layer.full(index);
-
//正上方
- layer.msg(‘靈活運用offset‘, {
- offset: ‘t‘,
- anim: 6
- });
模態框(layer)