Vanilla modal window
How do I make an vanilla modal window?
A really simple vanilla modal window written in Coffeescript and bling'd up with Scss.. What is a vanilla modal window? How do you make a vanilla modal window? This script and codes were developed by Jason Howmans on 05 August 2022, Friday.
Vanilla modal window - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Vanilla modal window</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="boombox"> <span class="open">Boom</span>
</div> <script src="js/index.js"></script>
</body>
</html>
Vanilla modal window - Script Codes CSS Codes
body { margin: 0; background: #69D2E7; font: 18px/27px Helvetica, Arial, sans-serif;
}
.boombox { text-align: center;
}
span.open { display: inline-block; margin: 60px 0 0 0; padding: 0 16px; height: 2em; background: #e4f7fb; font-size: 2em; line-height: 2em; border-radius: 8px; cursor: pointer;
}
span.open:hover { background: white;
}
div.window-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: white; background: rgba(255, 255, 255, 0.2);
}
div.window-wrapper section.window { display: block; width: 100%; max-width: 360px; margin: 40px auto 0; padding: 60px; background: white; border-radius: 10px; -moz-box-shadow: 0 2px 4px #1d9eb8; -webkit-box-shadow: 0 2px 4px #1d9eb8; box-shadow: 0 2px 4px #1d9eb8;
}
div.window-wrapper section.window a.close_btn { display: block; margin-top: 36px; height: 36px; background: #F38630; color: white; line-height: 36px; text-align: center; border-radius: 5px; cursor: pointer;
}
div.window-wrapper section.window a.close_btn:hover { background: #e36b0d;
}
Vanilla modal window - Script Codes JS Codes
/*
Vanilla Modal Window */
(function() { window.Modal = function($internals) { var $close_btn, $modal, proto; if (typeof $internals === 'string') { proto = Modal.prototype; $modal = document.createElement('div'); $modal.className = 'window-wrapper'; $modal.innerHTML = '<section class="window">' + $internals + '<a class="close_btn">Close</a></section>'; $close_btn = $modal.getElementsByClassName('close_btn')[0]; $close_btn.addEventListener('click', function() { document.body.removeChild($modal); return proto.IsActive = false; }); if (!proto.IsActive) { document.body.appendChild($modal); proto.IsActive = true; return false; } } }; window.Modal.prototype.IsActive = false; document.body.getElementsByClassName('open')[0].addEventListener('click', function() { return Modal('From the <b>window</b> to the <i>wall</i>..', true); });
}).call(this);
Developer | Jason Howmans |
Username | jasonhowmans |
Uploaded | August 05, 2022 |
Rating | 3 |
Size | 3,554 Kb |
Views | 46,552 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Modular Scale Stepper | 2,642 Kb |
IOS style sliding menu | 19,184 Kb |
A Pen by Jason Howmans | 1,223 Kb |
Re-usable elements | 3,290 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
A Pen by Final Boss tommyb9 | FBtommyb9 | 55,354 Kb |
Donald Trump - The New Yorker | Agbales | 2,502 Kb |
Process Accordion | Devilskitchen | 31,432 Kb |
Drag in vanilla js using dotval math instead of translate | Paulq | 2,662 Kb |
Image Hover | Johnheiner | 3,409 Kb |
Wikipedia Viewer | Thalpha | 4,426 Kb |
A Pen by Gregory Potdevin | GregoryPotdevin | 1,713 Kb |
Old calculator | Gnarfugh | 2,815 Kb |
A Pen by Dalton Liu | Liudalton | 12,437 Kb |
A Pen by panstable | Panstable | 2,940 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!