Hiding modal Windows is a good solution for processing interface elements that are not special and necessary to appear on webpages. Social networks can use modal windows to send private messages and forms that are only visible to members. The blog and magazine websites also apply to the author login pages separated from the main website. The modal window is easier than creating a new window in JavaScript because it is displayed with HTML tags, all things can be displayed in the same window.
I will demonstrate how to use the jQuery plug-in leanModal to create a Regular Modal window. If you have MIT general license, this plug-in is completely open-source and free. I like this plug-in very much and it is quite convenient to use. You can also add CSS on your own to achieve custom results.
Online Demo-download source code
Start
First, create two files named “index.html#and “style.css. in the same directory, create another folder named/js/, which contains the two files just now. The first is the mini jQuery library, and the second is the leanModal plug-in named jquery. leanModal. min. js.
Copy codeThe Code is as follows:
<! Doctype html>
<Html lang = "en-US">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> Modal Login Window Demo </title>
<Link rel = "shortcut icon" href = "http://designshack.net/favicon.ico">
<Link rel = "icon" href = "http://designshack.net/favicon.ico">
<Link rel = "stylesheet" type = "text/css" media = "all" href = "style.css">
<Script type = "text/javascript" src = "js/jquery-1.9.1.min.js"> </script>
<Script type = "text/javascript" charset = "UTF-8" src = "js/jquery. leanModal. min. js"> </script>
<! -- JQuery plugin leanModal under MIT License http://leanmodal.finelysliced.com.au/-->
</Head>
Fortunately, we do not need to include any default CSS style sheets, because the leanModal plug-in only provides very basic JS functions, everything is streamlined, with only bare templates left. However, we need to copy the CSS section to achieve dark coverage. The following code is copied from the plug-in website and used in the default style sheet.
Copy codeThe Code is as follows:
# Lean_overlay {position: fixed; z-index: 100; top: 0px; left: 0px;
..........
Conclusion
The Mode window effect can be used in more cases, not just login forms. You need to consider web pages with various UI elements and consider which elements may be more useful in your own windows. This involves special forms or longer details, which may not be liked by everyone. Please refer to my online demo to see how we can implement this leanModal jQuery effect using standard HTML blocks. Anyone who has some basic knowledge about CSS can easily understand my default style design. This function has so many purposes, many of which are imaginative. However, I really hope that these sample tutorial codes may provide developers with standard templates to save time.