Pure CSS Modal

Developer
Aaron Gustafson
Size
3,569 Kb
Views
26,312
  1. Pure CSS Modal Previews
  2. Pure CSS Modal HTML Codes
  3. Pure CSS Modal CSS Codes
  4. Pure CSS Modal JS Codes

How do I make an pure css modal?

This is just a simple demo of a simple, pure CSS modal window that is addressable via URL fragment.The JS enhancement returns focus to the triggering link.. What is a pure css modal? How do you make a pure css modal? This script and codes were developed by Aaron Gustafson on 13 August 2022, Saturday.

Pure CSS Modal Previews
IQ Test

Pure CSS Modal - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS Modal</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <p><a href="#modal-message">Create a new message</a></p>
<div id="modal-message" class="modal"> <div class="modal__window"> <h2 class="modal__title">New Message</h2> <form action=""> <p> <label for="test">Label</label> <input type="text" id="test"> </p> <p><button>Submit</button></p> </form> </div> <a class="modal__closer" href="#">Close</a>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pure CSS Modal - Script Codes CSS Codes

body { padding: 1em;
}
.modal { background: rgba(0, 0, 0, 0.5); /* Internet Explorer 10 */ display: -ms-flexbox; -ms-flex-pack: center; -ms-flex-align: center; /* Firefox */ display: -moz-box; -moz-box-pack: center; -moz-box-align: center; /* Safari, Opera, and Chrome */ display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; /* W3C */ display: box; box-pack: center; box-align: center; position: absolute; top: 0; left: 100%; right: 0; bottom: 0; -moz-transition: opacity .25s linear, left 0 .25s; -ms-transition: opacity .25s linear, left 0 .25s; -webkit-transition: opacity .25s linear, left 0 .25s; transition: opacity .25s linear, left 0 .25s; left: 100%; opacity: 0.0001;
}
.modal:target { left: 0; opacity: 1; -moz-transition: opacity .25s linear; -ms-transition: opacity .25s linear; -webkit-transition: opacity .25s linear; transition: opacity .25s linear;
}
.modal:focus { outline-width: 0;
}
.modal__window { background: #fff; border: 1px solid; box-shadow: 1px 1px 1px #000; padding: 20px; width: 200px; position: relative; z-index: 1;
}
.modal:focus .modal__window { outline-color: #5B9DD9; outline-offset: 0px; outline-style: auto; outline-width: 5px;
}
.modal__title { background: #ebebeb; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin: -20px -20px 10px; padding: 10px 20px; border-bottom: 1px solid;
}
.modal__closer { white-space: nowrap; overflow: hidden; text-indent: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
}

Pure CSS Modal - Script Codes JS Codes

(function(){ function assignCloserTarget() { var target = document.querySelector( this.href.replace( re_hash, '$1' ) ), closer = target.querySelector('.modal__closer'); // Add the event listener if we have not touched the node before if ( closer.returnTo == undefined ) { closer.addEventListener( 'click', returnToLink ); } closer.returnTo = this; target.focus(); } function returnToLink( e ) { if ( this.returnTo != undefined ) { this.returnTo.focus(); } } var forEach = Array.prototype.forEach, modal_links = document.querySelectorAll('a[href^="#modal"]'), modals = document.querySelectorAll('.modal'), re_hash = /^.*?(#.*)$/; forEach.call( modal_links, function( link ){ link.addEventListener( 'click', assignCloserTarget ); }); forEach.call( modals, function( modal ){ modal.setAttribute('tabindex','-1'); });
}());
Pure CSS Modal - Script Codes
Pure CSS Modal - Script Codes
Home Page Home
Developer Aaron Gustafson
Username aarongustafson
Uploaded August 13, 2022
Rating 3
Size 3,569 Kb
Views 26,312
Do you need developer help for Pure CSS Modal?

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!

Aaron Gustafson (aarongustafson) Script Codes
Name
Un-doing tables
Simple Compact Labels
Lazy Loading Images
Form Patterns
Simple pull quote
Simplified JS-based MQ Inspector
Easy Couch Mode
Footnote references that maintain good user focus
Visualizing CSS Transforms
FAQ JS-Enhanced Tab Order
Create amazing blog posts 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!