Snacks, as the name suggests, are ready to eat out of the box and ready to use.

Serve the second snack: SlidePopup.

GitHub

The online demo

Welcome to GitHub

Front end friends, today is going to introduce this small snack cow B. Every front-end should be exposed to this effect, and it is a very popular interaction.

Without further ado, here are the renderings:

The basic use

Multiple customizable options

I won’t have time to explain, but look at the examples.

This kind of popover is mainly used on the mobile end.

Start with a small goal:

• Ease of use, if you feel difficult to use, then there is no need to share.
• Compatibility, compatible with major browsers, but not all (IE earlier versions);
• Mobile first, mainly for mobile terminals to do more consideration;

In order to not have to worry about writing this effect in the future, hereby write [bottom pop-up] small plug-in.

use

The great beauty of object orientation is that they have almost the same API as NormalPopup because they inherit from the same parent class.

Matters needing attention: The best way to do this with SlidePopup is to separate the mask from the body (you can easily do this by organizing THE HTML structure and CSS styles), because you need to animate the mask and the body differently. The mask is a fade effect. The body is sliding up, and if the mask gets tangled up with the body, you get the result.

Best practice: Be committed to masking and subject separation

Here is the simplest use of SlidePopup:

const popupA = new SlidePopup({
    popup: '#popup-A',
    openBtn: '.open-popup-A',
    closeBtn: '.close-popup-A',
})
 Copy the code

Simplicity, simplicity is important. Keep it as simple as possible is the first rule of thumb when designing the Snack series apis.

minefields

Here are some of the bugs that can cause when using SlidePopup, most of which are not easy to hit, but to avoid Shouting “Waterfak” when you encounter them, read them carefully.

popupBan ontransform

SlidePopup creates cSS3 animations internally by manipulating the Transform style. Why transform? Transform’s 3D transformations trigger hardware acceleration to create a silky animation experience. This is learned by Swiper. In fact, if you apply a Transform to Popup, SlidePopup will throw an Error and the application will hang, and the snack will have a temper. So you don’t have to remember it, SlidePopup will prompt you on the console.

Trust me, it’s easy to do this by carefully organizing HTML structure and CSS styles. So, make me happy, make you easy^_^

Best practice: Organize HTML and CSS carefully and never transform on popup.

popupStyle cover

To make it as easy to use as possible, SlidePopup wraps styles inside the plug-in, otherwise you’d have to import a JS file, then a CSS file, and then carefully add CSS class names to the HTML, as Swiper did.

Because emerge from [bottom], not left, not right, not up, but bottom. Therefore, SlidePopup will add some styles to popup to make sure the popover is at the bottom:

position: fixed ! important; top: auto ! important; bottom: 0 ! important; margin-bottom: 0 ! important;Copy the code

These lines make sure that the popover rises from the bottom. Popover styles do not conflict with these lines, and if you insist on fighting these lines, the result may not be satisfactory.

Best practice: Make sure the above lines work.

The mobile terminalcursor:pointer

This is not the case for this plug-in, but for the entire mobile front end. On some iPhone models, if the clickable element is not set to this style, the click event will not be triggered. So make sure you set cursor:pointer on clickable elements. When using this plugin, the open button, close button, click on the mask to close, click on the Document blank area to close the popover and other clickable elements of SlidePopup are not added cursor:pointer, they need to be added by the user when writing the style.

Best practice: Set cursor:pointer on clickable elements.

File list