Hidden modal window technology is a good solution for dealing with interface elements that are not uniquely necessary to appear on a Web page. Social networks can use modal windows to communicate personal messages and forms that are visible only to members. The blog and magazine sites also apply to author landing pages that are separate from the main site, and modal windows are easier to create than new windows in JavaScript, because using HTML tags shows that everything can be in the same window.
I'll show you how to use the jquery plugin leanmodal to create a constant-scale window. If you have MIT general license, then this plugin is completely open source and free, I like this plugin, very convenient to use, but also can add CSS, to achieve a custom effect.
Online Demo--Download source code
Start
First, create two files named "index.html" and "Style.css", and in the same directory, create another folder named/js/, which contains just two files. The first is a miniature jquery library, the second is the Leanmodal plug-in, named Jquery.leanModal.min.js.
Copy Code code as follows:
<!doctype html>
<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/-->
The good news is that we don't need to include any default CSS stylesheets, because the Leanmodal plugin only provides very basic JS functionality, and everything is trimmed down to bare templates. However, we need to replicate the CSS section to achieve the dark overlay effect. Here is the code I copied from the plugin Web site used in the default style sheet.
Copy Code code as follows:
#lean_overlay {position:fixed; z-index:100; top:0px; left:0px;
..........
Conclusion
modal window effects can be used in more cases, not just login forms. You need to consider the various UI elements of the page and consider which elements may be more useful in your own window. This involves special forms or longer details that may not be enjoyed by everyone. Please take a look at my online sample demo to see how we can implement this leanmodal jquery effect using standard HTML blocks. Anyone with some basic knowledge of CSS is not difficult to understand my default style design. There are so many uses for this feature, and there is no lack of imagination. But I really hope that these sample tutorials code may provide developers with standard templates to save time.
