1. Link A Single-host event
<A id = "qqhm_open1" onclick = $ ("# qqhmsz_tb"). show (); $ (this). hide ();
Click events to hide yourself.
2. Application of the mask pop-up layer (this is a complete jsp code)
<% @ Page language = "java" import = "java. util. *" pageEncoding = "UTF-8" %>
<%
String path = request. getContextPath ();
String basePath = request. getScheme () + ": //" + request. getServerName () + ":" + request. getServerPort () + path + "/";
%>
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN">
<Html>
<Head>
<Base href = "<% = basePath %>">
<Title> removable pop-up box </title>
<Meta http-equiv = "pragma" content = "no-cache">
<Meta http-equiv = "cache-control" content = "no-cache">
<Meta http-equiv = "expires" content = "0">
<Meta http-equiv = "keywords" content = "keyword1, keyword2, keyword3">
<Meta http-equiv = "description" content = "This is my page">
<Style type = "text/css">
<! --
*{
Padding: 0;
Margin: 0;
}
# Upcontent {
List-style-position: outside;
List-style-image: none;
List-style-type: none;
}
# Upcontent li {
Font-size: 12px;
Color: #333;
Line-height: 150%;
}
# BodyL {
Float: left;
Width: 84px;
Margin-right: 2px;
}
# Tittleup {
Font-size: 14px;
Font-weight: bold;
Color: #000066;
Padding-left: 25px;
Border-bottom-width: 1px;
Border-bottom-style: solid;
Border-bottom-color: # d0daec;
Margin-bottom: 10px;
Padding-bottom: 10px;
}
A. od {
Float: right;
Font-size: 14px;
Color: # CC0000;
Text-decoration: none;
}
A. od: hover {
Color: # FF0000;
}
# Fd {
Background: # EDF1F8;
Border: 2px solid # 849BCA;
Margin-top: 2px;
Margin-left: 2px;
Float: left;
Overflow: hidden;
Position: absolute;
Left: pixel PX;
Top: 200px;
Cursor: move;
Float: left;/* filter: alpha (opacity = 50 );*/
Z-index: 10;
}
. Contentup
{
Padding: 20px;
}
}
-->
</Style>
</Head>
<Body>
<A href = "http://hi.baidu.com/521_yangyang/home" target = "_ blank"> my Baidu space: "Falling in love with bridge water" </a>
<Br/>
<Div id = "bodyL"> <a href = "#" onclick = "show ('fd ', event); return false; "> [open layer] </a> </div>
<Div id = "fd" style = "display: none; filter: alpha (opacity = 100); opacity: 1;">
<Div class = "contentup"> <a href = "#" class = "od" onclick = "closeed ('fd '); return false; "> close </a>
<Div id = "tittleup"> small programmer </div>
<Ul id = "upcontent">
<Li> <span style = 'font-weight: bold; color: red; '> Zhang yuge: </span> what do you do? Is it a sales representative or software development? </li>
<Li> <span style = 'font-weight: bold; color: green; '> baby sponge: </span> I am tired, happy, and still living in software development! You have a good job introduction. </Li>
<Li> <span style = 'font-weight: bold; color: red; '> Zhang yuge: </span> I am also confused, if you have a good idea, let me know... </li>
</Ul>
</Div>
</Div>
<Script type = "text/javascript">
Var prox;
Var proy;
Var proxc;
Var proyc;
Var isIe = (document. all )? True: false; // whether the browser is Internet Explorer
Function setSelectState (state)
{
Var objl = document. getElementsByTagName ('select ');
For (var I = 0; I <objl. length; I ++)
{
Objl [I]. style. visibility = state;
}
}
Function mousePosition (ev)
{
If (ev. pageX | ev. pageY)
{
Return {x: ev. pageX, y: ev. pageY };
}
Return {
X: ev. clientX + document. body. scrollLeft-document. body. clientLeft, y: ev. clientY + document. body. scrollTop-document. body. clientTop
};
}
// Close the window
Function closeWindow ()
{
If (document. getElementById ('back ')! = Null)
{
Document. getElementById ('back'). parentNode. removeChild (document. getElementById ('back '));
}
If (document. getElementById ('meswindow ')! = Null)
{
Document. getElementById ('meswindow'). parentNode. removeChild (document. getElementById ('meswindow '));
}
If (isIe)
{
SetSelectState ('');
}
}
Function show (id, ev) {/* -- open --*/
CloseWindow ();
Var bwidth1_parseint(document.doc umentElement. scrollWidth); // The width of the current window
Var bheight1_parseint(document.doc umentElement. scrollHeight) <592? 592: parseInt(document.doc umentElement. scrollHeight );
If (isIe)
{
SetSelectState ('den den ');
}
Var back = document. createElement ("div");/* -- creates a mask layer --*/
Back. id = "back ";
Var styleStr = "top: 0px; left: 0px; position: absolute; background: #666; width:" + bWidth + "px; height:" + bHeight + "px; ";
StyleStr + = (isIe )? "Filter: alpha (opacity = 40);": "opacity: 0.40;"; // mask style transparency
Back.style.css Text = styleStr;
Document. body. appendChild (back );
ClearInterval (prox );
ClearInterval (proy );
ClearInterval (proxc );
ClearInterval (proyc );
Var o = document. getElementById (id );
O. style. display = "block ";
O. style. width = "1px ";
O. style. height = "1px ";
Prox = setInterval (function () {openx (o, 500)}, 10 );
}
Function openx (o, x) {/* -- open x --*/
Var cx = parseInt (o. style. width );
If (cx <x)
{
O. style. width = (cx + Math. ceil (x-cx)/5) + "px ";
// O. style. width = (cx + 100) + "px ";
}
Else
{
ClearInterval (prox );
Proy = setInterval (function () {openy (o, 200)}, 10); // 200 is the height of the pop-up layer
}
}
Function openy (o, y) {/* -- open y --*/
Var cy = parseInt (o. style. height );
If (cy <y)
{
O. style. height = (cy + Math. ceil (y-cy)/5) + "px ";
// O. style. height = (cy + 100) + "px ";
}
Else
{
ClearInterval (proy );
}
}
Function closeed (id) {/* -- disable --*/
CloseWindow ();
ClearInterval (prox );
ClearInterval (proy );
ClearInterval (proxc );
ClearInterval (proyc );
Var o = document. getElementById (id );
If (o. style. display = "block ")
{
Proyc = setInterval (function () {closey (o)}, 10 );
}
}
Function closey (o) {/* -- enable y -- * // actually disables the special effect action.
Var cy = parseInt (o. style. height );
If (cy> 0)
{
O. style. height = (cy-Math. ceil (cy/5) + "px"; // hide
}
Else
{
ClearInterval (proyc );
Proxc = setInterval (function () {closex (o)}, 10 );
}
}
Function closex (o) {/* -- open x --*/
Var cx = parseInt (o. style. width );
If (cx> 0)
{
O. style. width = (cx-Math. ceil (cx/5) + "px ";
}
Else
{
ClearInterval (proxc );
O. style. display = "none"; // hide
}
}
/* ------------------------- Drag the mouse ---------------------*/
Var od = document. getElementById ("fd ");
Var dx, dy, mx, my, mouseD;
Var odrag;
Var isIE = document. all? True: false;
Document. onmousedown = function (e ){
Var e = e? E: event;
If (e. button = (document. all? 1: 0 ))
{
MouseD = true;
}
}
Document. onmouseup = function (){
MouseD = false;
Odrag = "";
If (isIE)
{
Od. releaseCapture ();
Od. filters. alpha. opacity = 100;
}
Else
{
Window. releaseEvents (od. MOUSEMOVE );
Od. style. opacity = 1;
}
}
// Function readyMove (e ){
Od. onmousedown = function (e ){
Odrag = this;
Var e = e? E: event;
If (e. button = (document. all? 1: 0 ))
{
Mx = e. clientX;
My = e. clientY;
Od. style. left = od. offsetLeft + "px ";
Od. style. top = od. offsetTop + "px ";
If (isIE)
{
Od. setCapture (); // The releaseCapture method is opposite to the setCapture method.
Od. filters. alpha. opacity = 50;
}
Else
{
Window. captureEvents (Event. MOUSEMOVE );
Od. style. opacity = 0.5;
}
}
}
Document. onmousemove = function (e ){
Var e = e? E: event;
If (mouseD = true & odrag)
{
Var mrx = e. clientX-mx;
Var mry = e. clientY-my;
Od. style. left = parseInt (od. style. left) + mrx + "px ";
Od. style. top = parseInt (od. style. top) + mry + "px ";
Mx = e. clientX;
My = e. clientY;
}
}
Function showBackground (obj, endInt)
{
Obj. filters. alpha. opacity + = 1;
If (obj. filters. alpha. opacity <endInt)
{
SetTimeout (function ()
{
ShowBackground (obj, endInt)}, 8 );
}
}
</Script>
</Body>
</Html>
<! -- EndFragment -->
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
