Use jQuery plug-in to create regular modal window login effect_jquery

Hidden modal window technology is a good solution for dealing with interface elements that are not specifically necessary to appear on the web page. Social networks can use modal windows to convey private messages and forms visible only to members. Also suitable for author login pages on blogs and magazine sites that are separate from the main site, modal windows are easier than creating new windows in JavaScript because everything can be rendered in the same window using HTML markup.

I will demonstrate how to create a regular modal window using the jQuery plug-in leanModal. If you have an MIT general license, then this plug-in is completely open source and free. I like this plug-in very much. It is very convenient to use. You can also add CSS by yourself to achieve customized effects.

Online demo - Download source code

Start

First create two files named "index. html" and "style.css" files in the same directory, create another folder named /js/, containing the two files just now. The first is a micro jQuery library and the second is a leanModal plugin named jquery.leanModal.min.js.

Copy code The code is as follows:

< ;title>Modal Login Window Demo

The good news is that we don’t need to include any default CSS style sheets anymore, because the leanModal plugin only provides very basic JS functionality, everything All were streamlined, leaving only the bare template. However we need to duplicate the CSS block to achieve the dark overlay effect. Below is the code I copied from the plugin website to use in the default stylesheet.

Copy code The code is as follows:

#lean_overlay { position: fixed; z-index:100 ; top: 0px; left: 0px;
..........

Conclusion

Modal window effects can be used in more situations than just login forms. You need to consider the various UI elements of your web page and consider which elements might be more useful in their own window. This involves special forms or longer details that may not be to everyone's liking. Please take a look at my online sample demo to see how we can achieve this leanModal jQuery effect using standard HTML blocks. Anyone with some basic knowledge of CSS will have no problem understanding my default styling. There are so many uses for this feature, some of them imaginative. But I really hope that these example tutorial codes might give developers a standard template to save time.