Skip to content

Instantly share code, notes, and snippets.

@laracasts
Last active January 28, 2022 00:13
Show Gist options
  • Save laracasts/799531ac5603612c52abf19a11243ef6 to your computer and use it in GitHub Desktop.
Save laracasts/799531ac5603612c52abf19a11243ef6 to your computer and use it in GitHub Desktop.
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
Copy link

this is awesome 👍

@taylormaguire
Copy link

love this

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment