Modals with Zero JavaScript
<div id="{{ $name }}" class="overlay"> | |
<a href="#" class="cancel"></a> | |
<div class="modal"> | |
{{ $slot }} | |
<a href="#" class="close">×</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 |
This comment has been minimized.
This comment has been minimized.
love this |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
this is awesome👍