Home > Developer > JavaScript
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Title> jQuery Tools standalone demo </title>
<! -- Include the Tools -->
<Script src = "http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"> </script>
<! -- Standalone page styling (can be removed) -->
<Link rel = "stylesheet" type = "text/css"
Href = "./overlay-basic.css"/>
<Style>
/* Some styling for triggers */
# Triggers {
Text-align: center;
}
# Triggers img {
Cursor: pointer;
Margin: 0 5px;
Background-color: # fff;
Border: 1px solid # ccc;
Padding: 2px;
-Moz-border-radius: 4px;
-Webkit-border-radius: 4px;
}
/* Styling for elements inside overlay */
. Details {
Position: absolute;
Top: 15px;
Right: 15px;
Font-size: 11px;
Color: # fff;
Width: 150px;
}
. Details h3 {
Color: # aba;
Font-size: 15px;
}
</Style>
</Head>
<Body> <! -- Trigger elements -->
<Div id = "triggers">
</Div>
<! -- Overlays -->
<Div class = "simple_overlay" id = "mies1">
<Div class = "details">
<H3> The Barcelona Pavilion <H4> Barcelona, Spain <P>
The Barcelona Pavilion, designed by Ludwig Mies van der Rohe,
Was the German Pavilion for the 1929 International Exposition in
Barcelona, Spain. It was an important building in the history
Modern architecture.
</P>
<P>
Several critics, historians and modernists have declared it"
Most beautiful building of the century"
</P>
</Div>
</Div>
<Div class = "simple_overlay" id = "mies2">
<Div class = "details">
<H3> The Barcelona Pavilion <H4> Barcelona, Spain <P>
Another unique feature of this building is the <em> exotic
Materials Mies chose to use </em>.
</P>
<P>
Plates of high-grade stone materials like veneers of Tinos verde
Antico marble and golden onyx as well as tinted glass of gray,
Green, white, in addition to translucent glass, perform
Exclusively as spatial dividers.
</P>
</Div>
</Div>
<Script>
$ (Document). ready (function (){
$ ("Img [rel]"). overlay ({
CloseOnClick: false,
Mask: 'darkred'
});
});
</Script>
</Body>
</Html>
CSS
Copy codeThe Code is as follows:
/* The overlayed element */
. Simple_overlay {
/* Must be initially hidden */
Display: none;
/* Place overlay on top of other elements */
Z-index: 10000;
/* Styling */
Background-color: #333;
Width: 675px;
Min-height: 200px;
Border: 1px solid #666;
/* CSS3 styling for latest browsers */
-Moz-box-shadow: 0 0 90px 5px #000;
-Webkit-box-shadow: 0 0 90px #000;
}
/* Close button positioned on upper right corner */
. Simple_overlay. close {
Background-image: url (./close.png );
Position: absolute;
Right:-15px;
Top:-15px;
Cursor: pointer;
Height: 35px;
Width: 35px;
}
Name of the closed css: xxx. close
Sex
All available attribute options are listed below:
| Attribute | Default Value | Description |
|---|---|---|
| Close | Overlay the ending element in a jQuery selector. These can be any element, such as links, buttons, or images. If this is not provided, intimate elements are automatically generated. Read |
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
