jquery Pop pop-up layer dropdown effect implementation
Note: At the end of this article, you can download a jquery file.
<!doctype HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/ Xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title></title>
<link href= "/css tutorial/style.css" type= "Text/css" rel= "stylesheet"/>
<link href= "/images/icon.ico" rel= "shortcut icon"/>
<meta http-equiv= "x-ua-compatible" content= "ie=7.5"/>
<meta http-equiv= "x-ua-compatible" content= "Ie=emulateie7"/>
<script charset= "Utf-8" >
/*
* 2011.04.20
* Jquery.ku6showtip ({centertip:$ (' #signuplogin_tip ')}); Center Pop tip
* ********************* Close Tip
* $ (document). Trigger (' Close.ku6showtip ')
* */
(function ($) {
$.kshowtip = function (data) {
$.kshowtip.loading (Data.centertip);
}$.extend ($.kshowtip, {
Settings: {
Opacity: ' 0.2 '
},
Loading:function (_tarwap) {
Showoverlay ();
_tarwap.css ({
"Left": $ (window). Width ()/2-150,
"Top": Getpagescroll () [1] + (Getpageheight ()/5),
"Z-index": 1000
}). addclass (' Ku6showtip '). Show ();
$ (document). Bind (' KeyDown ', function (e) {
if (E.keycode = =) {//esc closed
$ (document). Trigger (' Close.kshowtip ');
}
});
}
});
Getpagescroll () by quirksmode.com
function Getpagescroll () {
var xscroll, Yscroll;
if (Self.pageyoffset) {
Yscroll = Self.pageyoffset;
Xscroll = Self.pagexoffset;
else if (document.documentelement && document.documentelement.scrolltop) {//Explorer 6 strict
Yscroll = Document.documentelement.scrolltop;
Xscroll = Document.documentelement.scrollleft;
else if (document.body) {//All other explorers
Yscroll = Document.body.scrolltop;
Xscroll = Document.body.scrollleft;
}
return new Array (xscroll,yscroll)
}//adapted from GetPageSize () by quirksmode.com
function getpageheight () br> var windowheight
if (self.innerheight) { //All Except Explorer
windowheight = self.innerheight;
&NBSP;&NBSP} else if (document.documentelement && document.documentelement.clientheight) {//Explorer 6 strict Mode
windowheight = document.documentelement.clientheight;
&NBSP;&NBSP;&NBSP;&NBSP} else if (document.body) {//other explorers
WindowHeight = document.body.clientheight;
}
return windowheight
}/*
* Show Overlayer
* */
function Showoverlay () {
$ (' body '). Append (' <div id= "Face_overlay" ></div> ");$ (' #face_overlay '). Hide (). addclass (' FACE_OVERLAYBG ')
. css ({opacity:$.kshowtip.settings.opacity, height:document.body.clientheight})
. Click (function () {
$ (document). Trigger (' Close.kshowtip ');
}). Fadein (200);
}
/*
* Hide Overlayer and remove FACE_OVERLAYBG
* */function Hideoverlay () {
$this = $ ('. Ku6showtip ');
$this. Fadeout () function () {
$ (' #face_overlay '). Remove ();
});
}/*
* Binding
* */
$ (document). Bind (' Close.kshowtip ', function () {
$ (document). Unbind (' KeyDown ');
Hideoverlay ();
});
}) (jquery);
/*
* Pull Down
* Array mode, DataArray subscript is the ID name of the element to display for example: <div id= "Xiala1" ></div>
* ************************************************************************ pulldown is currently the default state
* var dataarray = [];
* dataarray[' xiala1 '] = new Array (
* [' La 1 ', ' xx1.html '],
* [' La La 2 ', ' xx2.html ']
* );
* $ (' div[rel=ku6pulldown] '). Ku6pulldown ({_dataarray:dataarray}); Call method
* ************************************************************************ solely single div
* var solelyarray = [];
* Solelyarray = new Array (
* [' La La ', ' xx111.html '],
* [' La 222 ', ' xx222.html ']
* );
* $ (' div[rel=ku6pulldown1] '). Kpulldown ({_datalist:solelyarray, type: ' solely ', _pulldownelement: ' Kpulldown_right '} );
* */
(function ($) {
$.fn.kpulldown = function (options) {
if ($ (this). length = = 0) return false;var defaults = {
_pulldownelement: ' kpulldown_sub ',//default dropdown child element
_datalist:[],
Type: ' pulldown '//pulldown default navigation dropdown mode, solely standalone div mode
}
var s = $.extend ({}, defaults, Options | | {});function Mousehandler () {
That's = $ (this);
var _subele = {};
Switch (s.type) {
Case ' pulldown '://default navigation Menu mode
_subele = Selecttype_pulldown ();
Break
Case ' solely '://Independent element a box div
_subele = selecttype_solely ();
Break
}
_subele.bind (' MouseEnter ', function () {}. Bind (' MouseLeave ', function () {
$ (document). Trigger (' Close.kpulldown ');
). Show ();$ (document). Bind (' Click.kpulldown ', function () {
$ (document). Trigger (' Close.kpulldown ');
})
}//processing DataList, generating array data HTML
function DataList (_data) {
if (typeof (_data)!= ' object ') return false;
var ischeck
switch (s.type) {
case ' pulldown ':
ischeck = That.children (). is ('. ' + s._pulldownelement );
break;
case ' solely ':
if ($ ('. ' + s._pulldownelement). length >=1) Ischeck = true;
break;
}if (!ischeck) {
var html = ';
$.each (_data, function (k, v) {
HTML + = ["<li><a href= '", v[1], "' >", V[0], "</a></li> n"].join (");
});
return ["<div class= '" + s._pulldownelement + "' ><ul>", HTML, "</ul></div>"].join ("");
}
}Select display Type
function Selecttype_pulldown () {//Type:pulldown
$ (document). Trigger (' Close.kpulldown ');
That.append (DataList (s._datalist[that.attr (' id ')));var _subele = That.children ('. ' + s._pulldownelement);
return _subele;
}
function selecttype_solely () {$ (document). Trigger (' Close.kpulldown ');
$ (' body '). Append (DataList (S._datalist));
var _subele = $ ('. ' + s._pulldownelement);
_subele.css ({left:that.offset (). Left-that.width ()-One, Top:that.offset (). Top});
return _subele;
}
Click Document REMOVE Element
function Removeele () {
Switch (s.type) {
Case ' pulldown ':
$ ('. ' + s._pulldownelement). Hide ();
Break
Case ' solely ':
$ ('. ' + s._pulldownelement). Remove ();
Break
}
}$ (document). Bind (' Close.kpulldown ', function () {
$ (document). Unbind (' Click.kpulldown ')
Removeele ();
})
Return This.bind ("Mouseo Tutorial ver", Mousehandler);
}
}) (jquery)</script>
<style>
Body {position:relative}
. FACE_OVERLAYBG {
Background-color: #000;
z-index:99;
}#face_overlay {
position:fixed;
_position:absolute;/*ie6 hack*/
top:0px;
left:0px;
height:100%;
width:100%;
}. Kpulldown_sub,. kpulldown_right {
Position:absolute;
top:0px;
right:50px;
width:60px;
border:1px solid #000;
Display:none;
}
</style>
</head>
<body>
<div id= "box" style= "width:1004px;height:2000px; border:1px solid #000 ">
<div id= "Open" style= "width:100px;height:100px;border:1px solid #000" > Pop-up </div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div rel= "Ku6pulldown" id= xiala1 "style=" width:50px;height:50px;border:1px solid #000;p osition:relative; margin-left:300px; " > Pull Down
</div>
<div rel= "Ku6pulldown" id= xiala2 "style=" width:50px;height:50px;border:1px solid #000;p osition:relative; margin-left:300px; " > Dropdown Q1
</div>
<div rel= "ku6pulldown1" id= xiala3 "style=" width:50px;height:50px;border:1px solid #000;p osition:relative; margin-left:300px; " > Dropdown Q2
</div>
<div rel= "ku6pulldown1" id= xiala4 "style=" width:50px;height:50px;border:1px solid #000;p osition:relative; margin-left:300px; " > Dropdown q3</div>
<div rel= "ku6pulldown1" id= xiala5 "style=" width:50px;height:50px;border:1px solid #000;p osition:relative; margin-left:300px; " > Dropdown q4</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/><br/></div>
<div id= "Signuplogin_tip" class= "Poptip poptip287x190" style= "Display:none" >
<div class= "Tiptopwap clearfix" >
<a class= "Close" >&nbsp;</a>
</div>
<span class= "Inputwap inputwap2" >
<label>
Account &nbsp;&nbsp;&nbsp; No.:
</label>
<input id= "username" tabindex= ' 1 '/></span><span class= "Inputwap inputwap2" >
<label>
Secret &nbsp;&nbsp;&nbsp; Code:
</label>
<input tabindex= ' 2 ' type= "password" id= "password"/></span><span class= "Inputwap inputwap3" ><a class= "Login" tabindex= ' 3 ' > Login &nbsp; record </a><a class= "FORGETPW" href= "/getback_password.html" target= "_ Blank "tabindex= ' 4" > Forgot password? </a></span>
<div class= "Tri_area tri_area_signup" >
<a class= "Newsignup" href= "/register.html" target= _blank "style=" _background: #ffaa0e; > New User Registration </a>
</div>
</div>
<script charset= "Utf-8" src= "J.ku6tip.js" type= "text/Web Effects" ></script>
<script>
jquery (document). Ready (function () {
$ ("Div.poptip a.close"). Bind ("click", Function (event) {
$ (document). Trigger (' Close.kshowtip ')
});
$ (' #open '). Bind (' click ', function () {
$.kshowtip ({centertip:$ (' #signuplogin_tip ')});
});var dataarray = [];
dataarray[' xiala1 '] = new Array (
[' La La 1 ', ' xx1.html '],
[' La La 2 ', ' xx2.html ']
);dataarray[' XIALA2 '] = new Array (
[' La La ', ' xx11.html '],
[' La La ', ' xx22.html ']
);var solelyarray = [];
Solelyarray = new Array (
[' La xx111.html ', ' the '],
[' La 222 ', ' xx222.html ']
);
$ (' div[rel=ku6pulldown1] '). Kpulldown ({_datalist:solelyarray, type: ' solely ', _pulldownelement: ' Kpulldown_right '}) ;
$ (' div[rel=ku6pulldown] '). Kpulldown ({_datalist:dataarray});
});
</script>
</body>
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
