Tutorial on using the layer pop-up plug-in-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Tutorial on using the layer pop-up plug-in

Y2J

May 22, 2017 pm 01:26 PM

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

Copy after login

Mobile phone pop-up effect

//弹窗后两秒自动关闭
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; 
})

Copy after login

More pop-up effects

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

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

Copy after login

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

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

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

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

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

2 weeks ago By DDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: How To Unlock Everything In MyRise

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7467

CakePHP Tutorial

1376

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers

Related knowledge

PyCharm Beginner's Guide: Comprehensive understanding of plug-in installation! Feb 25, 2024 pm 11:57 PM

PyCharm is a powerful and popular Python integrated development environment (IDE) that provides a wealth of functions and tools so that developers can write code more efficiently. The plug-in mechanism of PyCharm is a powerful tool for extending its functions. By installing different plug-ins, various functions and customized features can be added to PyCharm. Therefore, it is crucial for newbies to PyCharm to understand and be proficient in installing plug-ins. This article will give you a detailed introduction to the complete installation of PyCharm plug-in.

Error loading plugin in Illustrator [Fixed] Feb 19, 2024 pm 12:00 PM

When launching Adobe Illustrator, does a message about an error loading the plug-in pop up? Some Illustrator users have encountered this error when opening the application. The message is followed by a list of problematic plugins. This error message indicates that there is a problem with the installed plug-in, but it may also be caused by other reasons such as a damaged Visual C++ DLL file or a damaged preference file. If you encounter this error, we will guide you in this article to fix the problem, so continue reading below. Error loading plug-in in Illustrator If you receive an "Error loading plug-in" error message when trying to launch Adobe Illustrator, you can use the following: As an administrator

What is the Chrome plug-in extension installation directory? Mar 08, 2024 am 08:55 AM

What is the Chrome plug-in extension installation directory? Under normal circumstances, the default installation directory of Chrome plug-in extensions is as follows: 1. The default installation directory location of chrome plug-ins in windowsxp: C:\DocumentsandSettings\username\LocalSettings\ApplicationData\Google\Chrome\UserData\Default\Extensions2. chrome in windows7 The default installation directory location of the plug-in: C:\Users\username\AppData\Local\Google\Chrome\User

What should I do if there are no pop-up reminders for calendar events in Win10? How to recover if calendar event reminders are gone in Win10 Jun 09, 2024 pm 02:52 PM

The calendar can help users record your schedule and even set reminders. However, many users are asking what to do if calendar event reminders do not pop up in Windows 10? Users can first check the Windows update status or clear the Windows App Store cache to perform the operation. Let this site carefully introduce to users the analysis of the problem of Win10 calendar event reminder not popping up. To add calendar events, click the "Calendar" program in the system menu. Click the left mouse button on a date in the calendar. Enter the event name and reminder time in the editing window, and click the "Save" button to add the event. Solving the problem of win10 calendar event reminder not popping up

How to use Vue to implement pop-up window effects Sep 22, 2023 am 09:40 AM

How to use Vue to implement pop-up window effects requires specific code examples. In recent years, with the development of web applications, pop-up window effects have become one of the commonly used interaction methods among developers. As a popular JavaScript framework, Vue provides rich functions and ease of use, and is very suitable for implementing pop-up window effects. This article will introduce how to use Vue to implement pop-up window effects and provide specific code examples. First, we need to create a new Vue project using Vue's CLI tool. open end

Share three solutions to why Edge browser does not support this plug-in Mar 13, 2024 pm 04:34 PM

When users use the Edge browser, they may add some plug-ins to meet more of their needs. But when adding a plug-in, it shows that this plug-in is not supported. How to solve this problem? Today, the editor will share with you three solutions. Come and try it. Method 1: Try using another browser. Method 2: The Flash Player on the browser may be out of date or missing, causing the plug-in to be unsupported. You can download the latest version from the official website. Method 3: Press the "Ctrl+Shift+Delete" keys at the same time. Click "Clear Data" and reopen the browser.

How to use a WordPress plugin to implement instant location functionality Sep 05, 2023 pm 04:51 PM

How to use WordPress plug-ins to achieve instant location functionality With the popularity of mobile devices, more and more websites are beginning to provide geolocation-based services. In WordPress websites, we can use plug-ins to implement instant positioning functions and provide visitors with services related to their geographical location. 1. Choose the right plug-in. There are many plug-ins that provide geolocation services in the WordPress plug-in library to choose from. Depending on the needs and requirements, choosing the right plug-in is the key to achieving instant positioning functionality. Here are a few

Does PyCharm Community Edition support enough plugins? Feb 20, 2024 pm 04:42 PM

Does PyCharm Community Edition support enough plugins? Need specific code examples As the Python language becomes more and more widely used in the field of software development, PyCharm, as a professional Python integrated development environment (IDE), is favored by developers. PyCharm is divided into two versions: professional version and community version. The community version is provided for free, but its plug-in support is limited compared to the professional version. So the question is, does PyCharm Community Edition support enough plug-ins? This article will use specific code examples to

See all articles