Home > Developer > Web Develop
Source: gbin1.com
Download online Demo Online
The Hidden modal window technique is a good solution for dealing with interface elements that are not necessarily unique to the Web page. Social networks can use modal windows to communicate private messages and forms that are only visible to members. The blog and magazine sites also apply to the author landing page, which is separate from the main site, and modal windows are easier than creating new windows in JavaScript, because using HTML markup shows that everything can be presented in the same window.
I'll show you how to build a regular-sized window using the jquery plugin leanmodal. If you have MIT general license, then this plug-in is completely open source and free, I like this plugin, it is very convenient to use, but also to add their own CSS, to achieve a custom effect.
Online Demo--Download source code
Begin
First create two files named "index.html" and "Style.css", in the same directory, create another folder named/js/, which contains just two files. The first is the mini jquery library, the second is the Leanmodal plugin, named Jquery.leanModal.min.js.
<!doctype html>The good news is that we don't need any more default CSS stylesheets, because the Leanmodal plugin only provides a very basic JS function, everything is streamlined, leaving bare templates. However, we need to copy the CSS palette to achieve the dark overlay effect. Here is the code that I copied from the plugin site to use in the default stylesheet.
#lean_overlay { position:fixed; z-index:100; top:0px; left:0px; height:100%; width:100%; Background: #000; Display:none;}The coverage area will appear at the top of the page at 100% height and width, and jquery locks the target modal Div, which appears at the front of the HTML. Note that my body content is quite empty, and the only important element is the toggle button for displaying the modal window. Let's take a look at the HTML form #loginmodal div code segment.
<div id= "Loginmodal" style= "Display:none;" >Note that I have included: none; As a single inline CSS property. We need to force this div to not show, then Leanmodal () can make it fade on the page and display as a plate element. I am using a very simple CSS checkout form, the light blue design matches the darker shadow overlay, plus the input field, we can take advantage of the CSS3 transition effect. Another important page element is the "submit" button. Because this form will not send any data to the server, when the user commits, we just want to hide the modal window. I added the class. Hidemodal, you can set the internal jquery method. It will stop the default form submission for this modal window and display it as a purely aesthetically pleasing effect.
CSS layout style
My CSS file contains all the typical page resets I need, along with some typography and button styles. The center's Landing modal window contains a new button style that mimics other graphic designs. But there aren't too many unique CSS properties that need further explanation, and you should be able to build your own modal window styles.
/** page Structure **/#w {display:block; width:750px; margin:0 Auto; padding-top:30px;} #content {display:block; width:100%; Background: #fff; padding:25px 20px; padding-bottom:35px; -webkit-box-shadow:rgba (0, 0, 0, 0.1) 0px 1px 2px 0px; -moz-box-shadow:rgba (0, 0, 0, 0.1) 0px 1px 2px 0px; Box-shadow:rgba (0, 0, 0, 0.1) 0px 1px 2px 0px;} /** Custom Login button **/.flatbtn-blu {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; Box-sizing:border-box; Display:inline-block; outline:0; border:0; Color: #edf4f9; Text-decoration:none; Background-color: #4f94cf; Border-color:rgba (0, 0, 0, 0.1) rgba (0, 0, 0, 0.1) rgba (0, 0, 0, 0.25); Font-size:1.3em; Font-weight:bold; padding:12px 26px 12px 26px; Line-height:normal; Text-align:center; Vertical-align:middle; Cursor:pointer; Text-transform:uppercase; text-shadow:0 1px 0 Rgba (0,0,0,0.3); -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; -webkit-box-shadow:0 1px 1px rgba (0, 0, 0, 0.2); -moz-box-shadow:0 1px 1px rgba (0, 0, 0, 0.2); box-shadow:0 1px 1px rgba (0, 0, 0, 0.2);}. flatbtn-blu:hover {color: #fff; Background-color: #519dde;}. flatbtn-blu:active {-webkit-box-shadow:inset 0 1px 5px rgba (0, 0, 0, 0.1); -moz-box-shadow:inset 0 1px 5px rgba (0, 0, 0, 0.1); Box-shadow:inset 0 1px 5px rgba (0, 0, 0, 0.1);}The key element I think I need to master is the overlay effect and the modal window container, which I moved to the bottom of the stylesheet, grouped with all the other modal window properties. and limits the modal window width to 300px, since this example can only have 2 inputs. But keep in mind that Leanmodal will not force any default style to your window, so you can design it 100% independently.
/** modal window styles **/#lean_overlay {position:fixed; z-index:100; top:0px; left:0px; height:100%; width:100%; Background: #000; Display:none;} #loginmodal {width:300px; padding:15px 20px; Background: #f3f6fa; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; -webkit-box-shadow:0 1px 5px rgba (0, 0, 0, 0.5); -moz-box-shadow:0 1px 5px rgba (0, 0, 0, 0.5); box-shadow:0 1px 5px rgba (0, 0, 0, 0.5);} #loginform {/* No default styles */} #loginform label {display:block; font-size:1.1em; font-weight:bold; color: #7c8 291; margin-bottom:3px; }. Txtfield {display:block; width:100%; PADDING:6PX 5px; margin-bottom:15px; font-family: ' Helvetica Neue ', Helvetica, Verdana, Sans-serif; Color: #7988a3; Font-size:1.4em; text-shadow:1px 1px 0 Rgba (255, 255, 255, 0.8); Background-color: #fff; Background-image:-webkit-gradient (linear, left top, left bottom, from (#edf3f9), to (#fff)); Background-image:-webkit-linEar-gradient (Top, #edf3f9, #fff); Background-image:-moz-linear-gradient (Top, #edf3f9, #fff); Background-image:-ms-linear-gradient (Top, #edf3f9, #fff); Background-image:-o-linear-gradient (Top, #edf3f9, #fff); Background-image:linear-gradient (Top, #edf3f9, #fff); BORDER:1PX solid; Border-color: #abbce8 #c3cae0 #b9c8ef; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; -webkit-box-shadow:inset 0 1px 2px rgba (0, 0, 0, 0.25), 0 1px rgba (255, 255, 255, 0.4); -moz-box-shadow:inset 0 1px 2px rgba (0, 0, 0, 0.25), 0 1px rgba (255, 255, 255, 0.4); Box-shadow:inset 0 1px 2px rgba (0, 0, 0, 0.25), 0 1px rgba (255, 255, 255, 0.4); -webkit-transition:all 0.25s linear; -moz-transition:all 0.25s linear; Transition:all 0.25s Linear;} . txtfield:focus {outline:none; Color: #525864; Border-color: #84c0ee; -webkit-box-shadow:inset 0 1px 2px rgba (0, 0, 0, 0.15), 0 0 7px #96c7ec; -moz-box-shadow:inset 0 1px 2px rgba (0, 0, 0, 0.15), 0 0 7px #96c7ec; Box-sHadow:inset 0 1px 2px rgba (0, 0, 0, 0.15), 0 0 7px #96c7ec;}The Border and box shadows of each text field have a transition animation effect, and the color of the text disappears between the two inputs. I chose the light blue color scheme and the button effect that matches the input field. There are many others that provide the prefix CSS3 attribute, so this form is more appropriate for the new rendering engine. But it can only be displayed and rendered correctly on the main browser.
jquery modal effects
The unlucky thing is that we can't hide/show different windows by clicking on events against CSS3, and there's no possibility. The Shadowbox effect makes it easier to achieve modal window effects in JavaScript. Fortunately Leanmodal plugin only need a line of JS can be activated, I put the following code block before the end of the </body> tag.
$ (function () { $ (' #loginform '). Submit (function (e) { return false; });The first small block of code acts as the user presses "login" and tries to submit the form. We use the JavaScript keyword to return false to stop the event. You can read more articles about this method on stack overflow. The last line is the modal window work code we really need.
$ (' #modaltrigger '). Leanmodal ({top:110, overlay:0.45, CloseButton: ". Hidemodal"});If we do not customize any parameters, $ (' #modaltrigger '). Leanmodal () also works well. But in the demo I showed 3 optional variables you can apply to the function. The offset value at the top of the window is set first, and the background transparency level is marked between 0.0-1.0. Finally, attach a new jquery selector to close the button. This can be a class or ID, or some combination, including an HTML property selector. In my example, the Add to login button uses the same class. Hidemodal, so that each time you press the "Submit" button, the modal window will be hidden.
In order for the form to actually take effect, you need to remove the class from the button and delete the JavaScript code block before the Leanmodal () function. The result is redirecting the user to a new page. You can use a lot of different methods to verify the best way to show the modal.
Online Demo--Download source code
Conclusion
modal window effects can be used in more cases than just login forms. You need to consider the various UI elements of the Web page and consider which elements might be more useful in your own window. This involves special forms or longer details that may not be liked 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 who has a basic understanding of CSS is not difficult to understand my default style design. This feature has so many uses, of which there is no shortage of imagination. But I really hope that these sample tutorial code might give developers a standard template to save time.
Creating modal window landing effects using jquery
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
