Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Modals with Zero JavaScript
<div id="{{ $name }}" class="overlay">
<a href="#" class="cancel"></a>
<div class="modal">
{{ $slot }}
<a href="#" class="close">&times;</a>
</div>
</div>
.overlay {
visibility: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, .7);
}
.overlay:target {
visibility: visible;
}
.modal {
position: relative;
width: 600px;
max-width: 80%;
background: white;
border-radius: 8px;
padding: 1em 2em;
}
.modal .close {
position: absolute;
top: 15px;
right: 15px;
color: grey;
text-decoration: none;
}
.overlay .cancel {
position: absolute;
width: 100%;
height: 100%;
}
<a href="#join-modal">Join</a>
@component('modal', ['name' => 'join-modal'])
<h1>Pick a Plan</h1>
<p>
Lorem ipsum...
</p>
@endcomponent
@atmonshi

This comment has been minimized.

Copy link

commented May 28, 2019

this is awesome 👍

@taylormaguire

This comment has been minimized.

Copy link

commented May 30, 2019

love this

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.