Every now and then, it gets less local or functional…
<div class="modal-bg" id="modal-max"></div>
<div class="modal-container card-shadow">
<form>
<div class="co-1">
modal content, inputs, buttons…
</div>
</form>
</div>
The form is optional, but must be inside the container
Even in prototypes there are use cases for (fake) interactions with a not-yet existent server, so we have a basic overlay-with-a-box thing to pretend functionality. Unfortunately this is a bit more complex than the other elements here, since they consist of a script, a hidden content and a backdrop to indicate that the rest of the page is not available right now.
The script toggles the class in-action for the background #modal-max element that pushes it into the viewport and CSS tells the content in modal-container to follow.
The click on a button (or on the background in our example) toggles the class again and they move back to where they came from. Luckily this ultra-vanilla method means you only need one script for both.
The script itself is in the <html> <head> section, the content can be placed anywhere in the page. Maybe at the end, so it doesn‘t get in the way when building something.
<head>
<script>
function showHide(target, classtoggle) {
var element = document.getElementById(target);
element.classList.toggle(classtoggle);
}
</head>
<button onclick="showHide('modal-max','in-action')">open/close</button>
Just copy the block behind the next one from the source and put it in any other page. Don‘t worry about js frameworks. The script is already in every page per default. It‘s somewhat simple, but it works.
Disclaimer: Everything here is free to use, but no responsibility is taken for any outcome. Questions & Suggestions: ak at alexkoch dot net (you‘re not a robot, I know). And I don‘t use cookies. Version history