layui-layer independent component-pop-up layer introduction-Layui Tutorial-php.cn

Home

Web Front-end

Layui Tutorial

layui-layer independent component-pop-up layer introduction

尚

Dec 11, 2019 pm 04:47 PM

layui

layui-layer independent component-pop-up layer introduction

[Notes]

1. When using, please place the entire folder layer in any directory of your site, and just introduce layer.js. , except for jQuery, other files do not need to be introduced.

2. If your js import is processed through merging or you do not want to use the absolute path automatically obtained by layer, you can configure it through layer.config() (see the official website API page for details)

3. jquery requires 1.8

After downloading the layer, deploy it to any directory in your project (of course, we recommend placing it in the front-end related directory). You cannot move the file structure in the layer. Because they are an inseparable combination. Like this: (Special note: You need to introduce the entire layer folder into your file, not just the layer.js file)

layui-layer independent component-pop-up layer introduction

You don’t have to worry about those files What is it for? You only need to identify one file: layer.js. That’s right, when you try to present the layer on the page, you should do it like this: (the simplest example)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/layer.css"/>
        <style type="text/css">
            .btn{
                width: 100%;
                height: 50px;
                line-height: 50px;
                background: magenta;
                text-align: center;
                font-size: 15px;
            }
        </style>
    </head>
    <body>
        <div class="btn">点我</div>
        <!--你必须先引入jQuery1.8或以上版本-->
        <script src="js/jquery-2.1.0.js"></script>
        <script src="js/layer/layer.js"></script>
        <script>
            $(".btn").bind("click",function(){
                layer.msg(&#39;点我的人最美！&#39;);
            });
        </script>
    </body>
</html>

$("#btn").bind("click",function(){
        //layer.msg(&#39;点我的人最美！&#39;);
        layer.msg(&#39;此商品不存在或者已下架，看看其他商品吧！&#39;, {
        time: 3000
    });
});

More Example:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/layer.css"/>
        <style type="text/css">
            .btn:nth-child(odd){
                width: 100%;
                height: 50px;
                line-height: 50px;
                background: magenta;
                text-align: center;
                font-size: 15px;
            }
            .btn:nth-child(even){
                width: 100%;
                height: 50px;
                line-height: 50px;
                background: aqua;
                text-align: center;
                font-size: 15px;
            }
            #test5{
                text-align: center;
                width: 500px;
                margin-left: 500px;
            }
        </style>
    </head>
    <body>
        <div class="btn" id="btn">点我.btn</div>
        <div class="btn" id="test2">点我test2</div>
        <div class="btn" id="parentIframe">点我parentIframe</div>
        <div class="btn" id="test4">点我test4</div>
        <div class="btn" id="test5">点我test5</div>
        <!--你必须先引入jQuery1.8或以上版本-->
        <script src="js/jquery-2.1.0.js"></script>
        <script src="js/layer/layer.js"></script>
        <script>
        $(function(){
            $("#btn").bind("click",function(){
                layer.msg(&#39;点我的人最美！&#39;);
            });
            
            //弹出一个页面层
            $(&#39;#test2&#39;).on(&#39;click&#39;, function(){
              layer.open({
              type: 1,
              area: [&#39;600px&#39;, &#39;360px&#39;],
              shadeClose: true,   //点击遮罩关闭
              content: &#39;\<\div style="padding:20px;">自定义内容--添加自己需要的描述内容\<\/div>&#39;
              });
            });
            
            //弹出一个iframe层
            $(&#39;#parentIframe&#39;).on(&#39;click&#39;, function(){
              layer.open({
              type: 2,
              title: &#39;iframe父子操作&#39;,
              maxmin: true,
              shadeClose: true, //点击遮罩关闭层
              area : [&#39;800px&#39; , &#39;520px&#39;],
              content: &#39;parentIframe.html&#39;
              });
            });

            //弹出一个loading层
            $(&#39;#test4&#39;).on(&#39;click&#39;, function(){
              var ii = layer.load();
              //此处用setTimeout演示ajax的回调
              setTimeout(function(){
              layer.close(ii);
              }, 1000);
            });
            
            //弹出一个tips层
            $(&#39;#test5&#39;).on(&#39;click&#39;, function(){
              layer.tips(&#39;Hello tips!&#39;, &#39;#test5&#39;);
            });
            
        });
        </script>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/layer.css"/>
        <style type="text/css">
            .btn:nth-child(odd){
                width: 100%;
                height: 50px;
                line-height: 50px;
                background: magenta;
                text-align: center;
                font-size: 15px;
            }
            .btn:nth-child(even){
                width: 100%;
                height: 50px;
                line-height: 50px;
                background: aqua;
                text-align: center;
                font-size: 15px;
            }
            #test5{
                text-align: center;
                width: 100px;
                margin-left: 100px;
            }
        </style>
    </head>
    <body>
        <div class="btn" id="btn">点我.btn</div>
        <div class="btn" id="test2">点我test2</div>
        <div class="btn" id="parentIframe">点我parentIframe</div>
        <div class="btn" id="test4">点我test4</div>
        <div class="btn" id="test5">点我test5</div>
        
        <div class="btn" id="test6">点我test6</div>
        <div class="btn" id="test7">点我test7</div>
        <div class="btn" id="test8">点我test8</div>
        <div class="btn" id="test9">点我test9</div>
        
        <!--你必须先引入jQuery1.8或以上版本-->
        <script src="js/jquery-2.1.0.js"></script>
        <script src="js/layer/layer.js"></script>
        <script>
        $(function(){
            $("#btn").bind("click",function(){
                layer.msg(&#39;点我的人最美！&#39;);
            });
            
            //弹出一个页面层
            $(&#39;#test2&#39;).on(&#39;click&#39;, function(){
              layer.open({
              type: 1,
              area: [&#39;600px&#39;, &#39;360px&#39;],
              shadeClose: true,   //点击遮罩关闭
              content: &#39;\<\div style="padding:20px;">自定义内容--添加自己需要的描述内容\<\/div>&#39;
              });
            });
            
            //弹出一个iframe层
            $(&#39;#parentIframe&#39;).on(&#39;click&#39;, function(){
              layer.open({
              type: 2,
              title: &#39;iframe父子操作&#39;,
              maxmin: true,
              shadeClose: true, //点击遮罩关闭层
              area : [&#39;800px&#39; , &#39;520px&#39;],
              content: &#39;parentIframe.html&#39;
              });
            });

            //弹出一个loading层
            $(&#39;#test4&#39;).on(&#39;click&#39;, function(){
              var ii = layer.load();
              //此处用setTimeout演示ajax的回调
              setTimeout(function(){
                  layer.close(ii);
              }, 1000);
            });
            
            //弹出一个tips层
            $(&#39;#test5&#39;).on(&#39;click&#39;, function(){
              layer.tips(&#39;Hello tips!&#39;, &#39;#test5&#39;);
            });
            
            //======================================
            //多窗口模式，层叠置顶
            $(&#39;#test6&#39;).on(&#39;click&#39;, function(){
                layer.open({
                  type: 2 //此处以iframe举例
                  ,title: &#39;当你选择该窗体时，即会在最顶端&#39;
                  ,area: [&#39;390px&#39;, &#39;330px&#39;]
                  ,shade: 0
                  ,offset: [ //为了演示，随机坐标
                    Math.random()*($(window).height()-300)
                    ,Math.random()*($(window).width()-390)
                  ]
                  ,maxmin: true
                  ,content: &#39;settop.html&#39;
                  ,btn: [&#39;继续弹出&#39;, &#39;全部关闭&#39;] //只是为了演示
                  ,yes: function(){
                    $(that).click(); //此处只是为了演示，实际使用可以剔除
                  }
                  ,btn2: function(){
                    layer.closeAll();
                  }
                  
                  ,zIndex: layer.zIndex //重点1
                  ,success: function(layero){
                    layer.setTop(layero); //重点2
                  }
                });
            });
            
            
            
            //配置一个透明的询问框
            $(&#39;#test7&#39;).on(&#39;click&#39;, function(){
                layer.msg(&#39;大部分参数都是可以公用的<br>合理搭配，展示不一样的风格&#39;, {
                  time: 20000, //20s后自动关闭
                  btn: [&#39;明白了&#39;, &#39;知道了&#39;, &#39;哦&#39;]
                });
            });
                
            
            //示范一个公告层
            $(&#39;#test8&#39;).on(&#39;click&#39;, function(){
                layer.open({
                  type: 1
                  ,title: false //不显示标题栏
                  ,closeBtn: false
                  ,area: &#39;300px;&#39;
                  ,shade: 0.8
                  ,id: &#39;LAY_layuipro&#39; //设定一个id，防止重复弹出
                  ,resize: false
                  ,btn: [&#39;火速围观&#39;, &#39;残忍拒绝&#39;]
                  ,btnAlign: &#39;c&#39;
                  ,moveType: 1 //拖拽模式，0或者1
                  ,content: &#39;<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">内容<br>内容</div>&#39;
                  ,success: function(layero){
                    var btn = layero.find(&#39;.layui-layer-btn&#39;);
                    btn.find(&#39;.layui-layer-btn0&#39;).attr({
                      href: &#39;http://www.layui.com/&#39;
                      ,target: &#39;_blank&#39;
                    });
                  }
                });
            });
             
            //边缘弹出
            $(&#39;#test9&#39;).on(&#39;click&#39;, function(){
                layer.open({
                   type: 1
                   ,offset: &#39;c&#39; //具体配置参考：offset参数项(t、r、b、l、c)
                   ,content: &#39;<div style="padding: 20px 80px;">内容</div>&#39;
                   ,btn: &#39;关闭全部&#39;
                   ,btnAlign: &#39;c&#39; //按钮居中
                   ,shade: 0 //不显示遮罩
                   ,yes: function(){
                       layer.closeAll();
                  }
                });
            });


        });
        </script>
    </body>
</html>

For more layui knowledge, please pay attention to the layui usage tutorial column.

The above is the detailed content of layui-layer independent component-pop-up layer introduction. For more information, please follow other related articles on the PHP Chinese website!

Statement

This article is reproduced at:博客园. If there is any infringement, please contact admin@php.cn delete

2023最新layui视频教程推荐（建议收藏）Jul 19, 2021 pm 05:22 PM

以下为大家整理了前端UI框架 — layui的视频教程，不需要从迅雷、百度云之类的第三方网盘平台下载，全部在线免费观看。教程由浅入深，有前端基础的人就能学习，从安装到案例讲解，全面详细，帮助你更快更好的掌握layui框架！

如何利用Layui实现图片轮播图功能Oct 24, 2023 am 08:27 AM

如何利用Layui实现图片轮播图功能现如今，图片轮播图已经成为了网页设计中常见的元素之一。它可以使网页更加生动活泼，吸引用户的眼球，提升用户体验。在本文中，我们将介绍如何利用Layui框架来实现一个简单的图片轮播图功能。首先，我们需要在HTML页面中引入Layui的核心文件和样式文件：<linkrel="stylesheet"h

如何利用Layui实现图片拖拽和缩放效果Oct 24, 2023 am 09:16 AM

如何利用Layui实现图片拖拽和缩放效果在现代网页设计中，图片的交互效果成为增加网页活力和用户体验的重要手段。其中，图片拖拽和缩放效果是常见且受欢迎的交互方式之一。本文将介绍如何使用Layui框架实现图片拖拽和缩放效果，并提供具体的代码示例。一、引入Layui框架和相关依赖：首先，我们需要在HTML文件中引入Layui框架和相关依赖。可以通过以下代码示例引入

如何利用Layui开发一个具有分页功能的数据展示页面Oct 24, 2023 pm 01:10 PM

如何利用Layui开发一个具有分页功能的数据展示页面Layui是一个轻量级的前端UI框架，提供了简洁美观的界面组件和丰富的交互体验。在开发中，我们经常会遇到需要展示大量数据并进行分页的情况。以下是一个利用Layui开发的具有分页功能的数据展示页面的示例。首先，我们需要引入Layui的相关文件和依赖。在html页面的<head>标签中加入以下代

如何使用Layui开发一个支持图片放大缩小的相册功能Oct 24, 2023 am 09:02 AM

如何使用Layui开发一个支持图片放大缩小的相册功能相册功能在现代的网页应用中非常常见，通过展示用户上传的图片，让用户能够方便地浏览和管理图片。为了提供更好的用户体验，一种常见的需求是支持图片的放大和缩小功能。本文章将介绍如何使用Layui框架开发一个支持图片放大缩小的相册功能，同时提供具体的代码示例。首先，确保您已经引入Layui框架的CSS和JS文件。您

如何利用Layui实现图片反色和亮度调节功能Oct 25, 2023 am 09:10 AM

如何利用Layui实现图片反色和亮度调节功能引言：在前端开发中，经常会遇到需要对图片进行特效处理的情况。本文将介绍如何利用Layui框架实现图片反色和亮度调节功能，并提供具体代码实例供参考。一、Layui简介：Layui是一款优秀的前端UI框架，具有简洁、美观、易用等特点。它提供了丰富的前端组件，让开发者能够轻松搭建出精美的网站。二、准备工作：在开始之前，我

如何使用Layui开发一个支持文件上传和下载的资源管理系统Oct 24, 2023 am 09:19 AM

如何使用Layui开发一个支持文件上传和下载的资源管理系统引言：随着互联网的发展，数据资源的管理已经成为一项重要的任务。无论是企业内部的文档管理，还是个人的文件存储，都需要一个高效且易于使用的资源管理系统。Layui是一款轻量级的前端框架，具有简洁明了的设计以及丰富的组件库，非常适合用来进行资源管理系统的开发。本文将介绍如何使用Layui开发一个支持文

如何使用Layui框架开发一个支持实时通讯的在线客服系统Oct 25, 2023 am 08:47 AM

如何使用Layui框架开发一个支持实时通讯的在线客服系统概述：在线客服系统是现代企业提供与客户交流的重要渠道之一，而实时通讯是在线客服系统的关键技术之一。本文将介绍如何使用Layui框架开发一个支持实时通讯的在线客服系统，并提供具体的代码示例。一、准备工作安装Node.js：在开发环境中安装Node.js，并配置好相关环境。安装Layui：在项目中引入Lay

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

Repo: How To Revive Teammates

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

4 weeks agoByDDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

4 weeks agoByDDD

Hot Tools

Dreamweaver Mac version

Visual web development tools

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.