// BUTTONS --------------------------------
.modal-buttons.center-y
a.modal-btn(href="#modal-simple") Modal Simple
a.modal-btn(href="#modal-simple--offClickClose") Modal Simple<br>(off-modal click to close)
a.modal-btn(href="#modal-withOverlay") Modal with Overlay
a.modal-btn(href="#modal-withOverlay--offClickClose") Modal with Overlay<br> (off-modal click to close)
// CLOSE ICON
mixin closeIcon
svg.icon.iconClose(viewBox="0 0 32 40")
path(d="M16,0C7.163,0,0,7.163,0,16s7.163,16,16,16s16-7.163,16-16S24.837,0,16,0z M22.717,21.304l-1.414,1.414L16,17.414 l-5.303,5.304l-1.414-1.414L14.586,16l-5.303-5.304l1.414-1.414L16,14.586l5.303-5.304l1.414,1.414L17.414,16L22.717,21.304z")
// MODALS --------------------------------
#modal-simple.modal-target
.modal.center-x.center-y
a.modal-close(href="#"): +closeIcon
.modal-heading Simple Modal
.modal-body
p Greetings. Did you know you don't need JS for modals? It's true. It's entirely possible to build slick modals without JS using only HTML and CSS.
#modal-simple--offClickClose.modal-target
a.offModal-close(href="#")
.modal.center-x.center-y
a.modal-close(href="#"): +closeIcon
.modal-heading Simple Modal
.modal-body
p Greetings. Did you know you don't need JS for modals? It's true. It's entirely possible to build slick modals without JS using only HTML and CSS.
#modal-withOverlay.modal-target.modal-withOverlay
.modal.center-x.center-y
a.modal-close(href="#"): +closeIcon
.modal-heading Modal with Overlay
.modal-body
p Greetings. Did you know you don't need JS for modals? It's true. It's entirely possible to build slick modals without JS using only HTML and CSS.
#modal-withOverlay--offClickClose.modal-target.modal-withOverlay
a.offModal-close(href="#")
.modal.center-x.center-y
a.modal-close(href="#"): +closeIcon
.modal-heading Modal with Overlay
.modal-body
p Greetings. Did you know you don't need JS for modals? It's true. It's entirely possible to build slick modals without JS using only HTML and CSS.
// DESCRIPTION --------------------------------
.description.center-y
p Modals with no JavaScript.
.h3 How?
p Via the `:target` css pseudo selector.
.h3 Why?
p Simplicity.<br>No need to manually toggle classes and maintain state.
View Compiled
$green = #389E5A
/*
Core focus-of-pen Styles
ie: The styles important for understanding this pen
*/
.modal-target,
.modal
// effectively "turns off" the modal
opacity: 0
visibility: hidden
// Effectively "turns on" the modal when its target is active.
.modal-target:target
opacity: 1
visibility: visible
.modal
opacity: 1
visibility: visible
// For Smooth open/close
.modal
transition: opacity .3s ease
/*
Styles that are not
explicitly related to the learning
topic of this pen.
*/
.modal
padding: 15px 30px
color: white
max-width: 400px
width: 100%
background: $green
position: fixed
z-index: 500
// OVERLAY
.modal-withOverlay
&:before
content: ''
width: 100vw
height: 100vh
z-index: 400
background: rgba(black, 0.8)
position: fixed
left: 0
right: 0
top: 0
bottom: 0
.offModal-close
z-index: 450
width: 100%
height: 100%
position: fixed
left: 0
right: 0
top: 0
bottom: 0
.modal-close
position: absolute
top: -7px
right: -10px
.modal-btn
display: block
background: $green
padding: 10px 15px
margin-bottom: 1rem
text-align: center
&:hover
background: darken(@background, 7)
color: inherit
// button wrapper
.modal-buttons
max-width: 250px
width: 100%
/*
General Page Styles
*/
html
box-sizing: border-box
color: white
background: #009ed8
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif;
font-weight: 500
*, *:before, *:after
box-sizing: inherit
color: inherit
a
text-decoration: none
&:hover
color: darken(white, 17)
.description
font-size: 28px
width: 70%
margin-left: 300px
color: black
.iconClose
width: 30px
height: @width
fill: white
&:hover
fill: darken(white, 7)
/*
Immutable Helpers
*/
.center-x
left: 0
right: 0
margin-left: auto
margin-right: auto
position: absolute
.center-y
top: 50%
transform: translateY(-50%)
position: absolute
.center-text
text-align: center
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.