jpopup
Version:
Simple lightweight (<2kB) javascript popup modal plugin
231 lines (191 loc) • 6.06 kB
HTML
<html lang='en'>
<head>
<title>jPopup - Simple and easy-to-use lightweight JavaScript popup plugin</title>
<meta charset='utf-8'>
<meta name='description' content='Simple lightweight javascript popup plugin'>
<meta name='robots' content='index, follow'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel="preconnect" href="https://fonts.googleapis.com/">
<link rel="preconnect" href="https://buttons.github.io">
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
<script async defer src="https://buttons.github.io/buttons.js"></script>
<link href='css/index.css' rel='stylesheet' type='text/css'>
</head>
<style>
/*** DEMO style ***/
html {
font-size: 62.5%;
}
html,
body {
background: #f9f9f9;
margin: 0;
padding: 0;
font-family: 'Comfortaa', cursive, serif;
color: #6584c1;
}
.header {
margin: 30px auto 60px auto;
}
.demoContent {
width: 50rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 35px;
box-sizing: border-box;
background: #fff;
border-radius: 6px;
border: 1px solid #e6e6e6;
box-shadow: 0 0 25px #eaeaea;
}
.icon {
width: 160px;
height: 160px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -344px;
transform: translateX(-50%) rotate(45deg);
z-index: -1;
}
.icon svg {
width: 100%;
height: auto;
}
h1 {
font-size: 90px;
text-align: center;
margin: 0;
line-height: 1;
text-decoration: underline;
color: #6584c1;
}
h2 {
font-size: 20px;
text-align: center;
line-height: 1.5;
padding: 0;
margin: 0 0 25px 0;
}
.openPopupButton {
width: 100%;
display: block;
margin: 0;
padding: 20px 30px;
outline: 0;
box-sizing: border-box;
cursor: pointer;
background: #4262a0;
font-family: 'Comfortaa', cursive, serif;
font-size: 16px;
color: #fff;
text-align: center;
text-transform: uppercase;
border-radius: 4px;
font-weight: bold;
border: 0;
}
.btnWrap {
margin: 50px auto 0 auto;
padding-top: 20px;
border-top: 1px solid #e2e2e2;
text-align: center;
}
.jPopup-content {
text-align: center;
}
.jPopup-content strong {
font-size: 50px;
}
.jPopup-content p {
font-size: 22px;
line-height: 1.5;
}
.jPopup-content a {
color: #de6e40;
}
@media screen and (max-width: 640px) {
.icon {
width: 120px;
height: 120px;
margin-top: -272px;
}
.header {
margin: 0px auto 30px auto;
}
h1 {
font-size: 60px;
}
h2 {
font-size: 16px;
}
.demoContent {
width: 100%;
max-width: 94%;
padding: 50px 30px;
}
.btnWrap {
margin: 50px auto 0 auto;
}
.jPopup-content p {
font-size: 16px;
}
}
</style>
<body>
<main class="demoContent">
<header class="header">
<h1>jPopup</h1>
</header>
<h2>Simple lightweight JavaScript popup plugin</h2>
<button class="openPopupButton" type="button">Open popup</button>
<footer class="btnWrap">
<a class="github-button" href="https://github.com/robiveli/jpopup" data-size="large"
aria-label="View on GitHub">View on GitHub</a>
<a class="github-button" href="https://github.com/robiveli/jpopup/archive/master.zip"
data-icon="octicon-cloud-download" data-size="large"
egaaria-label="Download robiveli/jCaptcha on GitHub">Download</a>
</footer>
</main>
<div class="icon">
<svg enable-background="new 0 0 128 128" height="128px" id="Layer_1" viewBox="0 0 128 128" width="128px"
xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<g>
<g>
<path
d="M56,40H24v32h32V40z M24,88h80v-8H24V88z M24,104h80v-8H24V104z M64,40v8h40v-8H64z M64,64h40v-8H64V64z"
fill="#e2e2e2" />
</g>
</g>
<path
d="M120,0H8C3.59,0,0,3.59,0,8v112c0,4.41,3.59,8,8,8h112c4.41,0,8-3.59,8-8V8C128,3.59,124.41,0,120,0z M100,8 c2.211,0,4,1.789,4,4s-1.789,4-4,4s-4-1.789-4-4S97.789,8,100,8z M28,8h56c2.211,0,4,1.789,4,4s-1.789,4-4,4H28 c-2.211,0-4-1.789-4-4S25.789,8,28,8z M12,8c2.211,0,4,1.789,4,4s-1.789,4-4,4s-4-1.789-4-4S9.789,8,12,8z M120,112 c0,4.41-3.59,8-8,8H16c-4.41,0-8-3.59-8-8V32c0-4.41,3.59-8,8-8h96c4.41,0,8,3.59,8,8V112z M116,16c-2.211,0-4-1.789-4-4 s1.789-4,4-4s4,1.789,4,4S118.211,16,116,16z"
fill="#e2e2e2" />
</svg>
</div>
<script src="js/index.js"></script>
<script>
/*** DEMO js ***/
var demoContent = '<div>\
<strong>Hurray :)</strong>\
<p>You can put any content you want here.</p>\
<p>See documentation at <a href="https://github.com/robiveli/jpopup">GitHub</a></p>\
</div>';
var jPopupDemo = new jPopup({
content: demoContent,
transition: 'fade',
onOpen: function ($popupEl) {
console.log($popupEl, 'open');
},
onClose: function ($popupEl) {
console.log($popupEl, 'close');
}
});
document.querySelector('.openPopupButton').addEventListener('click', function () {
jPopupDemo.open();
});
</script>
</body>
</html>