layer弹窗插件的使用教程-tutorial js-php.cn

layer弹窗插件的使用教程

Y2J

Lepaskan： 2017-05-22 13:26:00

asal

3409 orang telah melayarinya

这篇文章主要介绍了layer弹窗插件操作方法,结合实例形式详细分析了layer弹窗插件的下载、调用、设置等具体步骤与操作技巧,需要的朋友可以参考下

本文实例讲述了layer弹窗插件操作方法。分享给大家供大家参考，具体如下：

1、首先去layer.layui.com/下载插件

2、在网站上有演示说明

3、操作方法如何

<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>

Salin selepas log masuk

手机弹窗效果

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

Salin selepas log masuk

更多弹效果

特别说明：事件需自己绑定，以下只展现调用代码。

//初体验
layer.alert(&#39;内容&#39;)
//第三方扩展皮肤
layer.alert(&#39;内容&#39;, {
 icon: 1,
 skin: &#39;layer-ext-moon&#39; //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
})
//询问框
layer.confirm(&#39;您是如何看待前端开发？&#39;, {
 btn: [&#39;重要&#39;,&#39;奇葩&#39;] //按钮
}, function(){
 layer.msg(&#39;的确很重要&#39;, {icon: 1});
}, function(){
 layer.msg(&#39;也可以这样&#39;, {
  time: 20000, //20s后自动关闭
  btn: [&#39;明白了&#39;, &#39;知道了&#39;]
 });
});
//提示层
layer.msg(&#39;玩命提示中&#39;);
//墨绿深蓝风
layer.alert(&#39;墨绿风格，点击确认看深蓝&#39;, {
 skin: &#39;layui-layer-molv&#39; //样式类名
 ,closeBtn: 0
}, function(){
 layer.alert(&#39;偶吧深蓝style&#39;, {
  skin: &#39;layui-layer-lan&#39;
  ,closeBtn: 0
  ,shift: 4 //动画类型
 });
});
//捕获页
layer.open({
 type: 1,
 shade: false,
 title: false, //不显示标题
 content: $(&#39;.layer_notice&#39;), //捕获的元素
 cancel: function(index){
  layer.close(index);
  this.content.show();
  layer.msg(&#39;捕获就是从页面已经存在的元素上，包裹layer的结构&#39;, {time: 5000, icon:6});
 }
});
//页面层
layer.open({
 type: 1,
 skin: &#39;layui-layer-rim&#39;, //加上边框
 area: [&#39;420px&#39;, &#39;240px&#39;], //宽高
 content: &#39;html内容&#39;
});
//自定页
layer.open({
 type: 1,
 skin: &#39;layui-layer-demo&#39;, //样式类名
 closeBtn: 0, //不显示关闭按钮
 shift: 2,
 shadeClose: true, //开启遮罩关闭
 content: &#39;内容&#39;
});
//tips层
layer.tips(&#39;Hi，我是tips&#39;, &#39;吸附元素选择器，如#id&#39;);
//iframe层
layer.open({
 type: 2,
 title: &#39;layer mobile页&#39;,
 shadeClose: true,
 shade: 0.8,
 area: [&#39;380px&#39;, &#39;90%&#39;],
 content: &#39;http://layer.layui.com/mobile/&#39; //iframe的url
}); 
//iframe窗
layer.open({
 type: 2,
 title: false,
 closeBtn: 0, //不显示关闭按钮
 shade: [0],
 area: [&#39;340px&#39;, &#39;215px&#39;],
 offset: &#39;rb&#39;, //右下角弹出
 time: 2000, //2秒后自动关闭
 shift: 2,
 content: [&#39;test/guodu.html&#39;, &#39;no&#39;], //iframe的url，no代表不显示滚动条
 end: function(){ //此处用于演示
  layer.open({
   type: 2,
   title: &#39;很多时候，我们想最大化看，比如像这个页面。&#39;,
   shadeClose: true,
   shade: false,
   maxmin: true, //开启最大化最小化按钮
   area: [&#39;893px&#39;, &#39;600px&#39;],
   content: &#39;http://fly.layui.com/&#39;
  });
 }
});
//加载层
var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
//loading层
var index = layer.load(1, {
 shade: [0.1,&#39;#fff&#39;] //0.1透明度的白色背景
});
//小tips
layer.tips(&#39;我是另外一个tips，只不过我长得跟之前那位稍有些不一样。&#39;, &#39;吸附元素选择器&#39;, {
 tips: [1, &#39;#3595CC&#39;],
 time: 4000
});
//prompt层
layer.prompt({
 title: &#39;输入任何口令，并确认&#39;,
 formType: 1 //prompt风格，支持0-2
}, function(pass){
 layer.prompt({title: &#39;随便写点啥，并确认&#39;, formType: 2}, function(text){
  layer.msg(&#39;演示完毕！您的口令：&#39;+ pass +&#39; 您最后写下了：&#39;+ text);
 });
});
//tab层
layer.tab({
 area: [&#39;600px&#39;, &#39;300px&#39;],
 tab: [{
  title: &#39;TAB1&#39;, 
  content: &#39;内容1&#39;
 }, {
  title: &#39;TAB2&#39;, 
  content: &#39;内容2&#39;
 }, {
  title: &#39;TAB3&#39;, 
  content: &#39;内容3&#39;
 }]
});
//相册层
$.getJSON(&#39;test/photos.json?v=&#39;+new Date, function(json){
 layer.photos({
  photos: json //格式见API文档手册页
  ,shift: 5 //0-6的选择，指定弹出图片动画类型，默认随机
 });
});

Salin selepas log masuk

【相关推荐】

1. Javacript免费视频教程

2. js开发用到百度地图的代码整理

3. 使用node.js分析url输出文件给客户端

4. JavaScript解决汉字转拼音的实例详解

5. 分享15个常用的js正则表达式

Atas ialah kandungan terperinci layer弹窗插件的使用教程. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!