jpopup
Version:
Simple lightweight (<2kB) javascript popup modal plugin
170 lines (143 loc) • 5.55 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></path></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></path></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>