Using the jquery plugin to create a constant-scale window landing effect _jquery

Source: Internet
Author: User
Tags html tags jquery library

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.