Home Web Front-end Layui Tutorial layui custom sliding pop-up animation

layui custom sliding pop-up animation

Jan 01, 2021 am 11:46 AM
layui animation Pop-ups

layui custom sliding pop-up animation

Introduction:

(Learning video sharing: Programming video)

We know the anim parameters in the layer module of layui It is possible to set pop-up animation effects, but there are very few types of such pop-up animations. Now in the project, we need to implement a pop-up window effect that pops up from the right side. Therefore, we encapsulated a sliding pop-up window by referring to the official template layuiAdmin and now share it with everyone.

layui custom sliding pop-up animation

1.layui encapsulates custom components

Create a new folder layui_exts under the js folder of layui, and create a custom component under the folder js file rightPopup.js, as shown below:

layui custom sliding pop-up animation

#js file writes code, the code is as follows (example):

layui.define(['layer'], function(exports){
    var layer = layui.layer;
    var obj = {
        rightPopupLayer: function (content='') {
            layer.open({
                type: 1,
                title: '',
                offset: ['10px', '100%'],
                skin: 'layui-anim layui-anim-rl layui-layer-adminRight',
                closeBtn: 0,
                content: content,
                shadeClose: true,
                area: ['16%', '95%']
            })
            let op_width = $('.layui-anim-rl').outerWidth();
            $('.layui-layer-shade').off('click').on('click', function () {
                $('.layui-anim-rl').animate({left:'+='+op_width+'px'}, 300, 'linear', function () {
                    $('.layui-anim-rl').remove()
                    $('.layui-layer-shade').remove()
                })

            })
        }
    };
    exports('rightPopup', obj);
});
Copy after login

2. In global js Set the entrance of layui to import custom components

layui custom sliding pop-up animation

3. Set the style of the custom component

Add the corresponding selection to the skin attribute in the layer of the custom component After adding the device name, the layer's pop-up box will automatically use the skin parameter as the class attribute value.

@keyframes layui-rl{
    from{transform:translateX(0px);}to{transform:translateX(-100%);}
}

@-webkit-keyframes layui-rl{
    from{transform:translateX(0px);}to{transform:translateX(-100%);}
}

.layui-anim {
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.layui-anim-rl {
    -webkit-animation-name: layui-rl;
    animation-name: layui-rl;
}

.layui-layer-adminRight {
    box-shadow: 1px 1px 10px rgba(0,0,0,.1);
    border-radius: 0;
    overflow: auto;
}
Copy after login

4. Finally

Just use the custom module the way layui uses other modules.

layui custom sliding pop-up animation

Related recommendations: layui tutorial

The above is the detailed content of layui custom sliding pop-up animation. 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

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

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 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 get form data in layui How to get form data in layui Apr 04, 2024 am 03:39 AM

layui provides a variety of methods for obtaining form data, including directly obtaining all field data of the form, obtaining the value of a single form element, using the formAPI.getVal() method to obtain the specified field value, serializing the form data and using it as an AJAX request parameter, and listening Form submission event gets data.

How to set up ppt animation to enter first and then exit How to set up ppt animation to enter first and then exit Mar 20, 2024 am 09:30 AM

We often use ppt in our daily work, so are you familiar with every operating function in ppt? For example: How to set animation effects in ppt, how to set switching effects, and what is the effect duration of each animation? Can each slide play automatically, enter and then exit the ppt animation, etc. In this issue, I will first share with you the specific steps of entering and then exiting the ppt animation. It is below. Friends, come and take a look. Look! 1. First, we open ppt on the computer, click outside the text box to select the text box (as shown in the red circle in the figure below). 2. Then, click [Animation] in the menu bar and select the [Erase] effect (as shown in the red circle in the figure). 3. Next, click [

How to set up jump on layui login page How to set up jump on layui login page Apr 04, 2024 am 03:12 AM

Layui login page jump setting steps: Add jump code: Add judgment in the login form submit button click event, and jump to the specified page through window.location.href after successful login. Modify the form configuration: add a hidden input field to the form element of lay-filter="login", with the name "redirect" and the value being the target page address.

How layui implements self-adaptation How layui implements self-adaptation Apr 26, 2024 am 03:00 AM

Adaptive layout can be achieved by using the responsive layout function of the layui framework. The steps include: referencing the layui framework. Define an adaptive layout container and set the layui-container class. Use responsive breakpoints (xs/sm/md/lg) to hide elements under specific breakpoints. Specify element width using the grid system (layui-col-). Create spacing via offset (layui-offset-). Use responsive utilities (layui-invisible/show/block/inline) to control the visibility of elements and how they appear.

How to open the 360 ​​browser pop-up window How to open the 360 ​​browser pop-up window Mar 28, 2024 pm 09:31 PM

Pop-up windows can be opened and used by themselves in 360 Browser. Some users do not know how to open pop-up windows in 360 Browser. Just uncheck the box in the advanced settings to not allow any website to display pop-up windows. This pop-up window Opening the introduction of the setting method will tell you the specific operation method. The following is a detailed introduction, so take a look. How to open the 360 ​​Browser pop-up window? Answer: Uncheck the box in the advanced settings to not allow any website to display pop-up windows. Detailed introduction: 1. Open the 360 ​​Browser and click the [Settings] icon on the upper right. 2. Select [Option]. 3. Click [Advanced Settings] in the list on the left. 4. Uncheck [Do not allow any website to display pop-up windows].

What should I do if pop-up windows always appear in Win11? How to solve the problem of pop-up windows when opening a software in Win11 What should I do if pop-up windows always appear in Win11? How to solve the problem of pop-up windows when opening a software in Win11 Mar 01, 2024 am 08:43 AM

When using Win11 system, sometimes a pop-up window will appear when opening a certain software, which will affect the user experience. This article will introduce how to solve the problem of pop-up windows when opening a software in Win11, and help users solve this problem. Method 1: 1. Press the [Win+S] key combination, or click the [Search icon] next to the start icon on the taskbar. In the opened Windows search, enter [Control Panel] in the search box, and then click to open the system given Best match [Control Panel Application]; 2. For all control panel item windows, switch to the [Large Icons] view mode, then find and click [Security and Maintenance] under Adjust Computer Settings; 3. Security and Maintenance window, left Side click [Change User Account Control Settings]; 4. User

How to run layui How to run layui Apr 04, 2024 am 03:42 AM

To run layui, perform the following steps: 1. Import layui script; 2. Initialize layui; 3. Use layui components; 4. Import layui styles (optional); 5. Ensure script compatibility and pay attention to other considerations. With these steps, you can build web applications using the power of layui.

See all articles