Use the jQuery. reveal pop-up layer

Use the jQuery. reveal pop-up layer
I recently used the pop-up layer and had to customize the UI. The original artDialog is too large and not suitable, so I found this item, which is small and easy to use, the basic pop-up masks are available, and the Coder determines what it wants. This plug-in is implemented based on Jquery and is very small. The plug-in itself is only a little more than 3 K, and it is easy to use. No more nonsense. The Demo first references part: Html-> head:

 
All references in the header except jquery are used by plug-ins. A css file, a js file, and a js file are plug-in bodies. css is a preset style, which is very convenient to use, you can modify it as needed. The following style labels are the basic styles I have used. Html-> body:
<a href="#" class="big-link" data-reveal-id="myModal" data-animation="fade">    Fade</a><div id="myModal" class="reveal-modal">    
 
The a label is used to display the pop-up layer. The div is the layer to be popped up. What is needed in the layer depends on your needs. Among them: 1. The value of the data-reveal-id attribute in tag a must correspond to the id of the layer to be popped up. Only id can be used here, and other positioning characters are not useful. 2. the data-animation attribute in tag a is set to the pop-up mode. Three attributes are available: fade, fadeAndPop, and none, which correspond to different animation effects, of course, the last real parameter none is no animation effect. We recommend that you use fade. You can try it. It is similar to others. Let's look at your personal preferences. After discussion with the UED staff, the result is that the three methods have little impact on the user experience. Here, the benevolent sees the wise and sees the wise. 3. The id attribute in the div tag must be set and correspond to the data-reveal-id attribute in the tag. This is a Jquery-based selector. I will not discuss this issue here, if you do not understand the selector, you can go to Baidu w3c School to learn it. 4. <a class = "close-reveal-modal"> & #215; </a> This line of code is a preset style. a close button is displayed in the upper-right corner of the pop-up layer, I have already written the Close event for closing the pop-up layer. I believe it is generally needed and can be customized. There is nothing to say about the JS Plug-In ontology. In fact, it is a series of operations and methods based on Jquery. The method is still the primitive method of assembling html, so there is no need to consider a lot about compatibility. Here, we only list the frequently-needed items.
Var defaults = {animation: 'fade ', // The optional modes are fade, fadeAndPop, and none animationspeed: 300. // The animation speed is closeonbackgroundclick: true, // set whether to close the pop-up dismissmodalclass: 'close-reveal-modal' when you click the modal background. // set the closed style };
 
The code comments are all in and do not need to be explained. Other things do not need to be changed normally. It depends on your individual circumstances. This plug-in is very easy to use. If you want to come and try it, you don't have to give it a demonstration. If any of your friends really need it, contact me and send it to you. The plug-in itself has a strong customization, style, and expression can all be defined by yourself, younger brother because of css skill is really invisible, it is not ugly here, you do it yourself. The js and css files of the plug-in are available in my space named jquery.reveal.jsand reveal.css respectively. If you need them, download them or contact me to send them to you. I am very lazy, you don't have the habit of creating a compressed package.