Home > Developer > Web Develop
Recently used in the pop-up layer, but also to customize the UI, the original use of the Artdialog is too large, inappropriate, so found this thing, and small and easy to use, the basis of the pop-up mask have, want what is not coder own decision.
This plugin is based on jquery, very small, the plug-in itself is only 3 K a little more, it is simple and straightforward to use.
Don't talk nonsense. On demo
The first is the reference section:
Html->head:
<Head> <MetaCharSet= "Utf-8" /> <title>Reveal Demo</title> <Linkrel= "stylesheet"href= "Reveal.css"> <Scripttype= "Text/javascript"src= "Http://code.jquery.com/jquery-1.6.min.js"></Script> <Scripttype= "Text/javascript"src= "Jquery.reveal.js"></Script> <styletype= "Text/css">Body{font-family:"Helveticaneue", "Helvetica-neue", "Helvetica", "Arial ", Sans-serif; }. Big-link{Display:Block;Margin-top:100px;text-align:Center;font-size:70px;Color:#06f; } </style> </Head>
All references in the head except jquery is the plug-in use of things, a CSS file, a JS file, JS file is the plugin ontology, CSS is a preset good style, it is very convenient to use, if necessary can be modified by themselves. The style tag below is written in the basic style I use, without him.
Html->body:
<ahref="#"class= "Big-link"Data-reveal-id= "Mymodal"data-animation= "Fade">Fade</a><DivID= "Mymodal"class= "Reveal-modal"> <H1>Test</H1> <aclass= "Close-reveal-modal">& #215;</a></Div>
This a-tag is used to display the pop-up layer, Div is to pop the layer, the layer needs something, what it looks like the individual needs.
which
The value of the Data-reveal-id property in the 1.a tag must correspond to the ID of the layer that needs to pop up, and only use the ID, which is not good for using other locators.
The Data-animation property in the 2.a tag is set to pop-up mode, there are three kinds of properties can be selected, fade, Fadeandpop, none, respectively, corresponding to different animation effects, of course, the last argument none is no animation effect, generally recommend the use of fade, Other people can try, much the same, look at a person's liking, after discussing with ued personnel, the result is three kinds of ways for the user experience of little impact, here is benevolent see.
3, the div tag id attribute must be set, and with the Data-reveal-id attribute in a tag, this is a jquery-based selector, here no longer repeat this problem, do not understand the selector can be Baidu school to learn.
4.<a class= "Close-reveal-modal" >& #215;</a> This line of code is a preset style, there will be a close button in the upper right corner of the pop-up layer, and the close event of closing the popup layer is already written. Believe in general everyone is needed, of course, can also be customized.
JS Plugin ontology Nothing to say, in fact, is based on a series of jquery operations and methods, the way is to assemble HTML this very primitive way, so there is no need to consider a lot of compatibility. This is only a list of things that need to be set up frequently.
var defaults = { // selectable mode is three: fade, Fadeandpop, none // animation effect speed true// sets whether to turn off the popup layer when clicking on a modal background // setting off the off style The code comments are all there and need not be explained.
Other things are not subject to change under normal circumstances, depending on the circumstances of the individual. This plugin is very simple to use, want to go there is no need to get a demo, if any of the friends really need to contact me directly to your hair.
Plug-in itself has a strong custom, style, expression can be defined by their own, the younger brother because the CSS is really a shame, here is not caught dead, you do the style bar.
Plug-in JS and CSS files in my space have, the name is: Jquery.reveal.js and reveal.css, we need to download or contact me directly to you, I am more lazy, do not readily do the habit of compressing the package, you light spray.
Jquery.reveal pop-up layer use
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
