Tutorial on using the layer pop-up plug-in

This article mainly introduces the operation method of the layer pop-up plug-in, and analyzes the specific steps and operating techniques of downloading, calling, and setting up the layer pop-up plug-in in detail with examples. Friends in need can refer to the following

The example in this article describes the operation method of the layer pop-up plug-in. Share it with everyone for your reference, the details are as follows:

1. First go to layer.layui.com/ to download the plug-in

2. There are demonstration instructions on the website

3. How to operate

<script src="../js/layer/layer.js"></script>
<script>
function openadd()
{
   $str=$("#addModal").html();//加载弹窗内容
   layer.open({
    type: 1,        //弹窗类型
    title: &#39;显示标题&#39;,   //显示标题 
    closeBtn: 1,     //是否显示关闭按钮
    shadeClose: true, //显示模态窗口
    skin: &#39;layui-layer-rim&#39;, //加上边框
    area: [&#39;600px&#39;, &#39;440px&#39;], //宽高
    content: $str //弹窗内容
  });
}
</script>
<p id="addModal">
要弹窗显示的内容
</p>

Mobile phone pop-up effect

//弹窗后两秒自动关闭
layer.open({ 
content: '通过style设置你想要的样式', 
style: 'background-color:#09C1FF; color:#fff; border:none;', 
time: 2 
});
//弹窗后点击关闭
layer.open({ 
  btn: ['关闭'], 
  content:'内容' 
})

More pop-up effects

Special note: Event needs to be bound by yourself, the following only shows the call code.

//初体验
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的选择，指定弹出图片动画类型，默认随机
 });
});

【Related recommendations】

1. Javacript free video tutorial

2. JS development using Baidu map code organization

3. Use node.js to analyze the url output file and send it to the client

4. Detailed explanation of the example of using JavaScript to convert Chinese characters to Pinyin

5. Share 15 commonly used js regular expressions

The above is the detailed content of Tutorial on using the layer pop-up plug-in. For more information, please follow other related articles on the PHP Chinese website!