Vanilla modal window

Developer
Size
3,554 Kb
Views
46,552

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 Previews

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);
Vanilla modal window - Script Codes
Vanilla modal window - Script Codes
Home Page Home
Developer Jason Howmans
Username jasonhowmans
Uploaded August 05, 2022
Rating 3
Size 3,554 Kb
Views 46,552
Do you need developer help for Vanilla modal window?

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!

Jason Howmans (jasonhowmans) Script Codes
Create amazing video scripts with AI!

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!