jquery-goodpopup
Version:
Responsive jQuery popup that just works as expected. Even in IE8.
342 lines (324 loc) • 12.3 kB
HTML
<html lang="ru">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<title>«GoodPopup» — responsive jQuery popup plugin. Handcrafted by Evgeniy Lazarev</title>
<!-- Demo page styles -->
<link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i&subset=cyrillic" rel="stylesheet" type="text/css"/>
<link href="https://fonts.googleapis.com/css?family=Anonymous+Pro:400,400i&subset=cyrillic" rel="stylesheet" type="text/css"/>
<style>
html,
body {
font-family: "Lora", "Georgia", serif;
font-size: 22px;
line-height: 1.25;
background: #fff;
color: #010101;
margin: 0;
padding: 0;
text-align: center;
}
@media screen and (max-width: 767px) {
html,
body {
font-size: 18px;
}
}
button {
font-family: "Lora", "Georgia", serif;
font-size: inherit;
border: 0;
}
.overflow {
overflow: hidden;
min-width: 320px;
}
.wrapper {
max-width: 1280px;
margin: 0 auto;
padding: 0 2em;
}
@media screen and (max-width: 767px) {
.wrapper {
padding: 0 1em;
}
}
.link:link,
.link:active,
.link:visited {
color: #010101;
text-decoration: none;
transition: color 0.2s;
}
.link-inner {
font-size: 0.5em;
border-bottom: 1px solid #010101;
border-bottom-color: rgba(1, 1, 1, 0.2);
transition: border-color 0.2s;
}
.link-inner__text {
font-size: 2em;
line-height: normal;
cursor: pointer;
}
.link:hover {
color: #e60010;
transition: none;
}
.link:hover .link-inner {
border-bottom: 1px solid #e60010;
border-color: rgba(230, 0, 16, 0.2);
transition: none;
}
.header {
font-size: 2.25em;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.075em;
margin: 0;
padding: 0.75em 0 0.2em;
position: relative;
}
.header:after {
content: 'v2.0.0-beta.20';
color: #fff;
background: #e60010;
font-size: 0.25em;
text-transform: none;
letter-spacing: 0;
white-space: nowrap;
margin: 0 0 0 0.5em;
padding: 0.2em 0.4em;
position: absolute;
}
@media screen and (max-width: 767px) {
.header {
padding: 0.5em 0 1em;
}
.header:after {
bottom: 1em;
left: 0;
right: 0;
margin: 0 auto;
width: 8em;
}
}
.subheader {
font-style: italic;
margin: 0;
padding: 0 0 1.25em;
}
.author {
font-style: italic;
font-size: 0.75em;
padding: 1.25em 0 1.5em;
margin: 0 20%;
border-top: 1px solid #eeeeee;
}
@media screen and (max-width: 767px) {
.author {
margin-right: 0;
margin-left: 0;
}
}
.download {
padding: 0 0 1.25em;
margin: 0 20% 2em;
border-bottom: 1px solid #eeeeee;
}
@media screen and (max-width: 767px) {
.download {
margin: 0 0 1.25em;
}
}
.download-button:link,
.download-button:active,
.download-button:visited {
display: inline-block;
vertical-align: top;
color: #fff;
text-decoration: none;
padding: 0.3em 0.9em 0.3em 2.7em;
border-radius: 0.2em;
background: #010101;
position: relative;
transition: background 0.25s;
}
.download-button:hover {
background: #e60010;
transition: none;
}
.download-button:before {
content: '';
width: 1.45em;
position: absolute;
top: 0;
bottom: 0.1em;
margin-left: -2em;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAArCAQAAABiU0bMAAACJ0lEQVRYw8WYTUhUURiGT4skDMFUxI22CEqTNlIILlwMbsdN0MafsI241GkRBIGKhQRZi0A3GiE4hMSgkgptRxFSAxEGnE2CUGg4XrNAsKfFNGnMz/3Oz4zv2Z73e957z++9ShmIWh7wijlieHjEmOUlXdSq/IsKQqyQTSuEqMgf/BKDHOAnjyGK84EPso1UO9x1jX+KrkZc4icx0cz54gEWXOD7sdG4Lb4JW923C/AVe5Wbwqt5jgu910e38JpNfuNKN3TgbazhWm+l8Gt8FBVcp5c+QmdaH72sZ+1/zGUJvpFfwicazegfzeEI+uMDGq80nLFCOIfjhR/+ltaY6gc45B1PaM6Gv8j3PAdIaYMeF7u9eQCANe7YvH77AAAdZ41z5xAAOlO2SoONxUUAuJ20dRsEmM4YYFqzyrekbUrQ9Vhy0WDBx5Wux0opPgsC7BOknua/LUBdxgB1BP71qaeVhG/dnxRJT/wP2ifqvKjuPcUP4YjFKRXDS4kLq04qPPGkEUbgihgPG4odjXm7JcBfYEuj4q7ik9bSifoGWNKqd6SY0Fy9OSMQ1ayWULRrb0NRZ3iIK0o4cRPBAA/zSineGBijlmOf0qPk/d9ESw7wcDVpH7aLYIxfPH2CmHkEYzxcPw1QxaFRiQgRY/zA/5PoJvsUUrPpy6iG1YLhI9m2kmcFwQ/k/gk5pnFCGlznaPA/0cpoY4xlvnCA56TtsUmEh+kf6n8A2DY0af0MwMQAAAAASUVORK5CYII=) no-repeat 0 50%;
background-size: 1.45em auto;
}
.code {
position: relative;
}
.code-pre {
background: #ececec;
font-family: "Anonymous Pro", "Tahoma", sans-serif;
font-size: 0.75em;
color: #b0b0b0;
padding: 1em 1.5em;
margin: 0 0 3em;
overflow-x: auto;
text-align: left;
border-left: 2px solid #e60010;
}
.code-highlight {
color: #010101;
}
.code-highlight__super {
color: #e60010;
}
.code-link:link,
.code-link:active,
.code-link:visited {
position: absolute;
top: 0;
right: 0;
font-size: 0.75em;
line-height: 1;
padding: 1em 2em 1em 1em;
text-decoration: none;
color: #e60010;
background: #dadada;
transition: background 0.25s, color 0.25s;
}
.code-link:hover {
background: #e60010;
color: #fff;
transition: none;
}
.code-link-svg {
position: absolute;
top: 0.75em;
right: 0.75em;
height: 0.75em;
}
.code-link-svg-g {
fill: #e60010;
transition: fill 0.25s;
}
.code-link:hover .code-link-svg-g {
fill: #fff;
transition: none;
}
@media screen and (max-width: 767px) {
.code-link:link,
.code-link:active,
.code-link:visited {
font-size: 0.6em;
padding: 0.5em 1em 0.6em;
}
.code-link-svg {
display: none;
}
}
.header2 {
font-size: 1.5em;
font-weight: 400;
margin: 0;
padding: 0 5% 0.5em;
}
@media screen and (max-width: 767px) {
.header2 {
padding: 0 0 1em;
}
}
.footer {
border-top: 1px solid #eeeeee;
font-size: 0.5em;
margin: 2em 0 0;
padding: 1.5em 0 2em;
}
</style>
<!-- jQuery & Handlebars -->
<!--[if IE 8]>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<![endif]-->
<!--[if gt IE 8]><!-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--<![endif]-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
<!-- GoodPopup plugin -->
<link href="jquery.goodpopup/css/style.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery.goodpopup/js/script.min.js"></script>
</head>
<body>
<div class="overflow"><div class="wrapper">
<h1 class="header">GoodPopup</h1>
<p class="subheader">Works as expected. Even in IE 8.</p>
<p class="author">jQuery-plugin from <a href="https://eugene-lazarev.ru" class="link"><span class="link-inner"><span class="link-inner__text">Evgeniy Lazarev</span></span></a></p>
<div class="download" id="download">
<a href="https://github.com/eugene-lazarev/jquery-goodpopup/raw/ef5461c5b0d4801b2fb4e5e4d4ed2e0d608b88fa/jquery.goodpopup/jquery.goodpopup_v2.0.0-beta.20.zip" class="download-button">Get jquery-goodpopup as .zip</a>
</div>
<h2 class="header2">Quick start as simple as possible</h2>
<div class="code">
<pre class="code-pre">
<!doctype html>
<html>
<head>
<!-- Dependencies: jQuery... -->
<span class="code-highlight"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script></span>
<!-- ...and Handlebars (not required; include only when you use its templates system for popups) -->
<span class="code-highlight"><script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script></span>
<!-- GoodPopup: JS & CSS -->
<span class="code-highlight"><script src="jquery.goodpopup/js/script.min.js"></script>
<link href="jquery.goodpopup/css/style.min.css" rel="stylesheet" type="text/css"/></span>
<!-- Stylize your popup as you like -->
<span class="code-highlight"><style>
.popup {
background: #fff;
padding: 2em;
}
</style></span>
</head>
<body>
<!-- Click the button to open popup -->
<span class="code-highlight"><button type="button">Click me</button></span>
<!-- Append handlebars-template with unique `id` as content of your popup -->
<span class="code-highlight"><script id="<span class="code-highlight__super">my-popup</span>" type="text/x-handlebars-template">
<div class="popup">
Hello, I am popup
</div>
</script></span>
<!-- Listen `click` event on button to open your popup -->
<span class="code-highlight"><script>
$(function() {
$("button").on("click", function() {
$.goodpopup.getPopup("<span class="code-highlight__super">my-popup</span>").open();
});
});
</script></span>
</body>
</html></pre>
<a href="examples/quick-start.html" class="code-link">
Open example page
<svg class="code-link-svg" enable-background="new 0 0 48 48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<g class="code-link-svg-g" fill="#e60010" transform="translate(382 380)">
<path d="m-360.3-351.4-2.3-2.3 25.8-25.7 2.2 2.2z"></path>
<path d="m-334-362.9h-3.4v-13.7h-13.7v-3.4h17.1z"></path>
<path d="m-342.6-332h-34.3c-2.8 0-5.1-2.3-5.1-5.1v-34.3c0-2.8 2.3-5.1 5.1-5.1h18.9v3.4h-18.9c-.9 0-1.7.8-1.7 1.7v34.3c0 .9.8 1.7 1.7 1.7h34.3c.9 0 1.7-.8 1.7-1.7v-18.9h3.4v18.9c.1 2.8-2.2 5.1-5.1 5.1"></path>
</g>
</svg>
</a>
</div>
<h2 class="header2">Handy API makes possible to control everything using<br/>options, methods, callbacks, events and much more</h2>
<p class="subheader">Look into it on <a href="https://github.com/eugene-lazarev/jquery-goodpopup/blob/master/README.md" class="link"><span class="link-inner"><span class="link-inner__text">Github</span></span></a></p>
<div class="footer">
Responsive jQuery popup plugin «GoodPopup», handcrafted by Evgeniy Lazarev<br/>
Latest release: v2.0.0-beta.20
</div>
</div></div>
</body>
</html>