Home>

jquery css3 mask pop-up layer animation effect,Very easy to use,Just two tags,Custom content and styles,Four common effects,Friends who know it can also modify the source code to the effect they want

Let me show you the effect picture first,If everyone feels good,Please refer to the implementation code.

Effect demonstration

The key code is as follows:

<! Doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">&met;meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jquery-css3 make simple popups
<script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" href="http://hovertree.com/texiao/jquery/85/style.css">
<style>.hovertreeinfo {text-align:center;}. Hovertreeinfo a {color:blue}</style>
</head>
<body>
<div><h2>jquery css3 make simple mask popup layer animation</h2>
Several common simple popup frames</div>
<div>
<a href="javascript:0;">Style 1</a>
<a href="javascript:0;">Style 2</a>
<a href="javascript:0;">Style 3</a>
<a href="javascript:0;">Style 4</a>
</div>
<!-Bouncing frame>
<div>
<div>
<p>Why ask</p>
<div>
Customize overall container width and height,Highly adaptive and fixed,A style can define its own style,Not beautiful here
</div>
<a href="javascript:;">close</a>
</div>
</div>
<div>
<div>
<p>Why ask</p>
<div>
Customize overall container width and height,Highly adaptive and fixed,A style can define its own style,It's not beautiful here,More special effects:<a href="http://hovertree.com/texiao/" target="_blank">http://hovertree.com/texiao/</a>
</div>
<a href="javascript:;">close</a>
</div>
</div>
<div>
<div>
<p>Why ask</p>
<div>
Customize overall container width and height,Highly adaptive and fixed,A style can define its own style,Not beautiful here
</div>
<a href="javascript:;">close</a>
</div>
</div>
<div>
<div>
<p>Why ask</p>
<div>
Customize overall container width and height,Highly adaptive and fixed,A style can define its own style,Not beautiful here
</div>
<a href="javascript:;">close</a>
</div>
</div>
<div><a href="http://hovertree.com" target="_ blank">How to ask</a>
<a href="http://hovertree.com/menu/texiao/" target="_ blank">Web page special effects</a>
<a href="http://hovertree.com/h/bjaf/0ai05muy.htm" target="_ blank">Code description</a></div>
<script type="text/javascript">
/* Boom box js content * /
jquery (document) .ready (function ($) {
//open window
$(". cd-popup-trigger0"). on ("click", function (event) {
event.preventdefault ();
$(". cd-popup"). addclass ("is-visible");
//$(". dialog-addquxiao"). hide ()
});
//close the window
$(". cd-popup"). on ("click", function (event) {
if ($(event.target) .is (". cd-popup-close") || $(event.target) .is (". cd-popup")) {
event.preventdefault ();
$(this) .removeclass ("is-visible");
}
});
//esc is closed
$(document) .keyup (function (event) {
if (event.which == "27") {
$(". cd-popup"). removeclass ("is-visible");
}
});
//open window
$(". cd-popup-trigger1"). on ("click", function (event) {
event.preventdefault ();
$(". cd-popup1"). addclass ("is-visible1");
//$(". dialog-addquxiao"). hide ()
});
//close the window
$(". cd-popup1"). on ("click", function (event) {
if ($(event.target) .is (". cd-popup-close") || $(event.target) .is (". cd-popup1")) {
event.preventdefault ();
$(this) .removeclass ("is-visible1");
}
});
//esc is closed
$(document) .keyup (function (event) {
if (event.which == "27") {
$(". cd-popup1"). removeclass ("is-visible1");
}
});
//Open the window by He Wenqi
$(". cd-popup-trigger2"). on ("click", function (event) {
event.preventdefault ();
$(". cd-popup2"). addclass ("is-visible2");
//$(". dialog-addquxiao"). hide ()
});
//close the window
$(". cd-popup2"). on ("click", function (event) {
if ($(event.target) .is (". cd-popup-close") || $(event.target) .is (". cd-popup2")) {
event.preventdefault ();
$(this) .removeclass ("is-visible2");
}
});
//esc is closed
$(document) .keyup (function (event) {
if (event.which == "27") {
$(". cd-popup2"). removeclass ("is-visible2");
}
});
//open window
$(". cd-popup-trigger3"). on ("click", function (event) {
event.preventdefault ();
$(". cd-popup3"). addclass ("is-visible3");
//$(". dialog-addquxiao"). hide ()
});
//close the window
$(". cd-popup3"). on ("click", function (event) {
if ($(event.target) .is (". cd-popup-close") || $(event.target) .is (". cd-popup3")) {
event.preventdefault ();
$(this) .removeclass ("is-visible3");
}
});
//esc is closed
$(document) .keyup (function (event) {
if (event.which == "27") {
$(". cd-popup3"). removeclass ("is-visible3");
}
});
});
</script>
</body>
</html>
  • Previous Basic Principles of Android Custom Controls (1)
  • Next Detailed Golang inherited mock instance