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 |
A Pen by Jason Howmans | 1,223 Kb |
Vanilla modal window | 3,554 Kb |
IOS style sliding menu | 19,184 Kb |
Re-usable elements | 3,290 Kb |
Modular Scale Stepper | 2,642 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 |
Flat buttons for Eliassen.com | Kdooley89 | 1,737 Kb |
Pure CSS Spinners | Jlong | 2,043 Kb |
After America | Jonathangarner | 2,686 Kb |
Material Design-Layout-Principles Practice | Fraina | 2,331 Kb |
Angular Sandbox | Alexgurrola | 1,616 Kb |
Bloomberg Style Link Hover | Gil-- | 1,609 Kb |
FreeCodeCamp - Simon Game | Ivhed | 8,481 Kb |
RWD- Mostly Fluid Layout Pattern | Marcocastro | 2,312 Kb |
Elephants Full screen site | Orrinward | 3,981 Kb |
Coming Soon | MariamMassadeh | 1,680 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!