<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>A Simple, Flexible, Responsive, Flexbox-Based Modal</title>
<!-- <link rel="stylesheet" type="text/css" href="css/V3.css"> -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div class="wrapper">
<div class="holdmystuff">
<div class="holder_svg">
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" viewBox="0 0 325 233" enable-background="new 0 0 325 233" xml:space="preserve">
<defs>
</defs>
<polygon fill="#FFFFFF" stroke="#B3B3B3" stroke-width="2" stroke-miterlimit="10" points="295,32 31.4,32 1,32 1,90 1,110 1,150
1,170 1,232 31.4,232 295,232 301,232 301,170 301,150 301,110 301,90 301,32 "/>
<rect x="11" y="42" fill="#ADADAD" width="123" height="68"/>
<rect x="11" y="196" fill="#999999" width="280" height="26"/>
<rect x="141" y="42" fill="#999999" width="149" height="23"/>
<rect x="141" y="73" fill="#C2C2C2" width="149" height="37"/>
<rect x="11" y="153" fill="#D6D6D6" width="280" height="35"/>
<rect x="11" y="130" fill="#EBEBEB" width="280" height="5"/>
<rect x="311" y="42" fill="#999999" width="14" height="23"/>
<rect x="311" y="74" fill="#999999" width="14" height="23"/>
<rect x="311" y="106" fill="#999999" width="14" height="23"/>
<rect x="48" fill="#999999" width="212" height="22"/>
<path fill="#D1D1D1" d="M72,61.5c22.8,0,44.1,6.7,62,18.1V42H11v37C28.7,67.9,49.6,61.5,72,61.5z"/>
<path fill="#C2C2C2" d="M151,209.5c-53,0-101.7-1.6-140-4.3V222h280v-16.8C252.7,207.9,204,209.5,151,209.5z"/>
</svg>
</div>
<h2>A Simple, Flexible, Responsive, Flexbox-Based Modal</h2>
<p>Passing data-attributes and havin' fun!
<ul>
<li><a class="sm_open" data-modal="examplePlain" data-effect="pushdown">Modal (Plain 'Ol Vanilla')</a></li>
<li><a class="sm_open" data-modal="exampleAdvanced" data-effect="pushup" data-icons="is_right" data-header-type="detached">Modal (w/Detached Header and Right Icon Menu)</a></li>
<li><a class="sm_open" data-modal="exampleAdvanced" data-effect="pushup" data-icons="is_right">Modal (w/Header and Right Icon Menu)</a></li>
<li><a class="sm_open" data-modal="exampleAdvanced" data-effect="pushup" data-icons="is_left">Modal (w/Header and Left Icon Menu)</a></li>
<li>
<a class="sm_open" data-modal="exampleData" data-effect="pushdown" data-header="#1 This header is from the link" data-overlay="none" data-content="This is a sample HTML string being passed with a data-attribute... <p><h3>Super easy to change, simply by tweaking the button launching the modal.</h3></p>"
data-wrapper-color="green">Modal (Passing Data-Attributes w/Transparent Overlay)
</a>
</li>
<li>
<a class="sm_open" data-modal="exampleData" data-effect="pushdown" data-header="#1 This header is from the link" data-overlay="red" data-content="This is a sample HTML string being passed with a data-attribute... <p><h3>Super easy to change, simply by tweaking the button launching the modal.</h3></p>"
data-wrapper-color="red">Modal (Passing Data-Attributes w/Eye-Searing Red Overlay Color)
</a>
</li>
<li>
<a class="sm_open" data-modal="exampleData" data-effect="pushup" data-header="#1 This header is from the link" data-content="This is a sample HTML string being passed with a data-attribute... <p><h3>Super easy to change, simply by tweaking the button launching the modal.</h3></p>"
data-wrapper-color="tan">Modal (Passing Data-Attributes w/HTML)
</a>
</li>
<li>
<a class="sm_open" data-modal="exampleData" data-effect="pushdown" data-header="#2 This header is from the link" data-content="....and this is a second sample string being passed with a data-attribute attached to the button." data-wrapper-color="red">Modal (Passing Data-Attributes #1)
</a>
</li>
<li>
<a class="sm_open" data-modal="exampleData" data-effect="pushdown" data-header="#3 This header is from the link" data-content="...and this is yet another sample string being passed with a data-attribute attached to the button. I'm just typing this sentence to give a little more bulk to the modal...not filling it with important info, but making it stand out from the other examples a bit more."
data-wrapper-color="green">Modal (Passing Data-Attributes #2)
</a>
</li>
</ul>
</div>
<div class="slim_modal" id="examplePlain">
<div class="sm_content">
<div class="sm_content_inner_wrap">
<div class="sm_area_top">
<h3>Example Modal Content
<span>...for this CSS Demo</span>
</h3>
</div>
<div class="sm_area_bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt nihil asperiores recusandae odio distinctio earum voluptatibus, quisquam repellendus voluptas quaerat quis est totam, optio quia, molestias voluptatum error libero pariatur!</p>
</div>
<a class="sm_close sm_close_button">CLOSE</a>
</div>
</div>
</div>
<div class="slim_modal" id="exampleAdvanced">
<div class="sm_content">
<div class="sm_header">Hi. I'm a Header.</div>
<div class="sm_icon_menu">
<ul>
<li class="sm_close"><i class="fa fa-times fa-fw "></i></li>
<li><i class="fa fa-gear fa-fw"></i></li>
<li><i class="fa fa-plus fa-fw"></i></li>
<li><i class="fa fa-sitemap fa-fw"></i></li>
<li><i class="fa fa-user fa-fw"></i></li>
</ul>
</div>
<div class="sm_content_inner_wrap">
<div class="sm_area_top">
<h3>Example Modal Content
<span>...for this CSS Demo</span>
</h3>
</div>
<div class="sm_area_bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt nihil asperiores recusandae odio distinctio earum voluptatibus, quisquam repellendus voluptas quaerat quis est totam, optio quia, molestias voluptatum error libero pariatur!</p>
</div>
<div class="sm_close sm_close_button">CLOSE</div>
</div>
</div>
</div>
<div class="slim_modal" id="exampleData">
<div class="sm_content">
<div class="sm_header"></div>
<div class="sm_icon_menu is_right">
<ul>
<li class="sm_close"><i class="fa fa-times fa-fw "></i></li>
</ul>
</div>
<div class="sm_content_inner_wrap">
<div class="sm_area_all"></div>
<a class="sm_close sm_close_button">CLOSE</a>
</div>
</div>
</div>
</div>
</body>// I wanted to create a simple modal that would not rely on a library (like Foundation, Semantic, Bootstrap, etc), since those can often feel bloated and/or somewhat difficult to style. This also allow you to pass "data-" parameters for content and a couple of settings for the modal. This example is set up to allow you to look at the JS, CSS, and html markup...and learn from it. Sure, you can use as is - but dang, think of what you can do to make it better. Add some more data-attributes, transform effects, etc. Enjoy.
// breakpoints
$XS: 320px;
$S: 414px;
$M: 769px;
$L: 1025px;
$XL: 1401px;
// media queries
@mixin MQ($canvas) {
@if $canvas == XS {
@media only screen and (min-width: $XS) { @content; }
}
@if $canvas == S {
@media only screen and (min-width: $S) { @content; }
}
@else if $canvas == M {
@media only screen and (min-width: $M) { @content; }
}
@else if $canvas == L {
@media only screen and (min-width: $L) { @content; }
}
@else if $canvas == XL {
@media only screen and (min-width: $XL) { @content; }
}
}
// Paddings
$sm_header_height: 40px;
$sm_content_padding: 15px;
// Inner Modal Color
$segment_color: #ffffff;
$segmentborder_color: #ffffff;
// Fonts
$primary-font: "Montserrat", sans-serif;
$maintextcolor: #404040;
//Colors
$red: #EF798A;
$tan: #E1D59A;
$green: #a9cd99;
// rem fallback - credits: http://zerosixthree.se/
@mixin transition($what, $speed, $ease, $delay) {
transition: $what $speed $ease $delay;
transition: $what $speed $ease $delay;
transition: $what $speed $ease $delay;
transition: $what $speed $ease $delay;
transition: $what $speed $ease $delay;
}
// generic transform
@mixin transform($transforms) {
transform: $transforms;
transform: $transforms;
transform: $transforms;
transform: $transforms;
transform: $transforms;
}
// rotate
@mixin rotate ($deg) {
@include transform(rotate(#{$deg}deg));
}
// scale
@mixin scale($scale) {
@include transform(scale($scale));
}
// translate
@mixin translate ($x, $y) {
@include transform(translate($x, $y));
}
@mixin box-shadow($top, $left, $blur, $depth, $color, $inset: false) {
@if $inset {
box-shadow:inset $top $left $blur $depth $color;
box-shadow:inset $top $left $blur $depth $color;
box-shadow:inset $top $left $blur $depth $color;
} @else {
box-shadow: $top $left $blur $depth $color;
box-shadow: $top $left $blur $depth $color;
box-shadow: $top $left $blur $depth $color;
}
}
// border radius
@mixin border-radius($radius) {
border-radius: $radius;
border-radius: $radius;
border-radius: $radius;
border-radius: $radius;
border-radius: $radius;
}
// Flexbox Mixins
// https://philipwalton.github.io/solved-by-flexbox/
// https://github.com/philipwalton/solved-by-flexbox
//
// Copyright (c) 2013 Brian Franco
//
// Permission is hereby granted, free of charge, to any person obtaining a
// copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
// The above copyright notice and this permission notice shall be included
// in all copies or substantial portions of the Software.
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
// CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
// TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
// SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
//
// This is a set of mixins for those who want to mess around with flexbox
// using the native support of current browsers. For full support table
// check: http://caniuse.com/flexbox
//
// Basically this will use:
//
// * Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
// * Final standards syntax (FF, Safari, Chrome, IE11, Opera)
//
// This was inspired by:
//
// * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
//
// With help from:
//
// * http://w3.org/tr/css3-flexbox/
// * http://the-echoplex.net/flexyboxes/
// * https://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
// * https://css-tricks.com/using-flexbox/
// * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
// * https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes
//----------------------------------------------------------------------
// Flexbox Containers
//
// The 'flex' value causes an element to generate a block-level flex
// container box.
//
// The 'inline-flex' value causes an element to generate a inline-level
// flex container box.
//
// display: flex | inline-flex
//
// http://w3.org/tr/css3-flexbox/#flex-containers
//
// (Placeholder selectors for each type, for those who rather @extend)
@mixin flexbox {
display: box;
display: flex;
display: flex;
display: flexbox;
display: flex;
}
%flexbox { @include flexbox; }
//----------------------------------
@mixin inline-flex {
display: inline-box;
display: inline-flex;
display: inline-flex;
display: inline-flexbox;
display: inline-flex;
}
%inline-flex { @include inline-flex; }
//----------------------------------------------------------------------
// Flexbox Direction
//
// The 'flex-direction' property specifies how flex items are placed in
// the flex container, by setting the direction of the flex container's
// main axis. This determines the direction that flex items are laid out in.
//
// Values: row | row-reverse | column | column-reverse
// Default: row
//
// http://w3.org/tr/css3-flexbox/#flex-direction-property
@mixin flex-direction($value: row) {
@if $value == row-reverse {
box-direction: reverse;
box-orient: horizontal;
} @else if $value == column {
box-direction: normal;
box-orient: vertical;
} @else if $value == column-reverse {
box-direction: reverse;
box-orient: vertical;
} @else {
box-direction: normal;
box-orient: horizontal;
}
flex-direction: $value;
flex-direction: $value;
flex-direction: $value;
flex-direction: $value;
}
// Shorter version:
@mixin flex-dir($args...) { @include flex-direction($args...); }
//----------------------------------------------------------------------
// Flexbox Wrap
//
// The 'flex-wrap' property controls whether the flex container is single-line
// or multi-line, and the direction of the cross-axis, which determines
// the direction new lines are stacked in.
//
// Values: nowrap | wrap | wrap-reverse
// Default: nowrap
//
// http://w3.org/tr/css3-flexbox/#flex-wrap-property
@mixin flex-wrap($value: nowrap) {
// No Webkit Box fallback.
flex-wrap: $value;
flex-wrap: $value;
@if $value == nowrap {
flex-wrap: none;
} @else {
flex-wrap: $value;
}
flex-wrap: $value;
}
//----------------------------------------------------------------------
// Flexbox Flow (shorthand)
//
// The 'flex-flow' property is a shorthand for setting the 'flex-direction'
// and 'flex-wrap' properties, which together define the flex container's
// main and cross axes.
//
// Values: <flex-direction> | <flex-wrap>
// Default: row nowrap
//
// http://w3.org/tr/css3-flexbox/#flex-flow-property
@mixin flex-flow($values: (row nowrap)) {
// No Webkit Box fallback.
flex-flow: $values;
flex-flow: $values;
flex-flow: $values;
flex-flow: $values;
}
//----------------------------------------------------------------------
// Flexbox Order
//
// The 'order' property controls the order in which flex items appear within
// their flex container, by assigning them to ordinal groups.
//
// Default: 0
//
// http://w3.org/tr/css3-flexbox/#order-property
@mixin order($int: 0) {
box-ordinal-group: $int + 1;
order: $int;
order: $int;
flex-order: $int;
order: $int;
}
//----------------------------------------------------------------------
// Flexbox Grow
//
// The 'flex-grow' property sets the flex grow factor. Negative numbers
// are invalid.
//
// Default: 0
//
// http://w3.org/tr/css3-flexbox/#flex-grow-property
@mixin flex-grow($int: 0) {
box-flex: $int;
flex-grow: $int;
flex-grow: $int;
flex-positive: $int;
flex-grow: $int;
}
//----------------------------------------------------------------------
// Flexbox Shrink
//
// The 'flex-shrink' property sets the flex shrink factor. Negative numbers
// are invalid.
//
// Default: 1
//
// http://w3.org/tr/css3-flexbox/#flex-shrink-property
@mixin flex-shrink($int: 1) {
flex-shrink: $int;
flex-shrink: $int;
flex-negative: $int;
flex-shrink: $int;
}
//----------------------------------------------------------------------
// Flexbox Basis
//
// The 'flex-basis' property sets the flex basis. Negative lengths are invalid.
//
// Values: Like "width"
// Default: auto
//
// http://www.w3.org/TR/css3-flexbox/#flex-basis-property
@mixin flex-basis($value: auto) {
flex-basis: $value;
flex-basis: $value;
flex-preferred-size: $value;
flex-basis: $value;
}
//----------------------------------------------------------------------
// Flexbox "Flex" (shorthand)
//
// The 'flex' property specifies the components of a flexible length: the
// flex grow factor and flex shrink factor, and the flex basis. When an
// element is a flex item, 'flex' is consulted instead of the main size
// property to determine the main size of the element. If an element is
// not a flex item, 'flex' has no effect.
//
// Values: none | <flex-grow> <flex-shrink> || <flex-basis>
// Default: See individual properties (1 1 0).
//
// http://w3.org/tr/css3-flexbox/#flex-property
@mixin flex($fg: 1, $fs: null, $fb: null) {
// Set a variable to be used by box-flex properties
$fg-boxflex: $fg;
// Box-Flex only supports a flex-grow value so let's grab the
// first item in the list and just return that.
@if type-of($fg) == 'list' {
$fg-boxflex: nth($fg, 1);
}
box-flex: $fg-boxflex;
flex: $fg $fs $fb;
box-flex: $fg-boxflex;
flex: $fg $fs $fb;
flex: $fg $fs $fb;
flex: $fg $fs $fb;
}
//----------------------------------------------------------------------
// Flexbox Justify Content
//
// The 'justify-content' property aligns flex items along the main axis
// of the current line of the flex container. This is done after any flexible
// lengths and any auto margins have been resolved. Typically it helps distribute
// extra free space leftover when either all the flex items on a line are
// inflexible, or are flexible but have reached their maximum size. It also
// exerts some control over the alignment of items when they overflow the line.
//
// Note: 'space-*' values not supported in older syntaxes.
//
// Values: flex-start | flex-end | center | space-between | space-around
// Default: flex-start
//
// http://w3.org/tr/css3-flexbox/#justify-content-property
@mixin justify-content($value: flex-start) {
@if $value == flex-start {
box-pack: start;
flex-pack: start;
} @else if $value == flex-end {
box-pack: end;
flex-pack: end;
} @else if $value == space-between {
box-pack: justify;
flex-pack: justify;
} @else if $value == space-around {
flex-pack: distribute;
} @else {
box-pack: $value;
flex-pack: $value;
}
justify-content: $value;
justify-content: $value;
justify-content: $value;
}
// Shorter version:
@mixin flex-just($args...) { @include justify-content($args...); }
//----------------------------------------------------------------------
// Flexbox Align Items
//
// Flex items can be aligned in the cross axis of the current line of the
// flex container, similar to 'justify-content' but in the perpendicular
// direction. 'align-items' sets the default alignment for all of the flex
// container's items, including anonymous flex items. 'align-self' allows
// this default alignment to be overridden for individual flex items. (For
// anonymous flex items, 'align-self' always matches the value of 'align-items'
// on their associated flex container.)
//
// Values: flex-start | flex-end | center | baseline | stretch
// Default: stretch
//
// http://w3.org/tr/css3-flexbox/#align-items-property
@mixin align-items($value: stretch) {
@if $value == flex-start {
box-align: start;
flex-align: start;
} @else if $value == flex-end {
box-align: end;
flex-align: end;
} @else {
box-align: $value;
flex-align: $value;
}
align-items: $value;
align-items: $value;
align-items: $value;
}
//----------------------------------
// Flexbox Align Self
//
// Values: auto | flex-start | flex-end | center | baseline | stretch
// Default: auto
@mixin align-self($value: auto) {
// No Webkit Box Fallback.
align-self: $value;
align-self: $value;
@if $value == flex-start {
flex-item-align: start;
} @else if $value == flex-end {
flex-item-align: end;
} @else {
flex-item-align: $value;
}
align-self: $value;
}
//----------------------------------------------------------------------
// Flexbox Align Content
//
// The 'align-content' property aligns a flex container's lines within the
// flex container when there is extra space in the cross-axis, similar to
// how 'justify-content' aligns individual items within the main-axis. Note,
// this property has no effect when the flexbox has only a single line.
//
// Values: flex-start | flex-end | center | space-between | space-around | stretch
// Default: stretch
//
// http://w3.org/tr/css3-flexbox/#align-content-property
@mixin align-content($value: stretch) {
// No Webkit Box Fallback.
align-content: $value;
align-content: $value;
@if $value == flex-start {
flex-line-pack: start;
} @else if $value == flex-end {
flex-line-pack: end;
} @else {
flex-line-pack: $value;
}
align-content: $value;
}
html * {
font-smoothing: antialiased;
osx-font-smoothing: grayscale;
}
*, *:after, *:before {
}
html, body {
/* you need to set this to assign to the main element a min height of 100% */
height: 100%;
}
body {
font-family: $primary-font; // variables inside partials > _variables.scss
color: $maintextcolor;
margin: 0 auto;
background: $green;
}
.wrapper {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
.holdmystuff {
background: #ffffff;
max-width: 60%;
padding: 40px;
@include border-radius(6px);
@include box-shadow(0px, 0px, 80px, 0px, rgba(30,30,30,0.2));
font-size: .9em;
.holder_svg {
svg {
max-width: 40%;
}
padding-bottom: 25px;
border-bottom: 1px solid #efefef;
margin-bottom: 25px
}
p {
padding-bottom: 20px;
margin: 0 auto;
}
ul {
padding: 0px;
margin: 0 auto;
list-style-type: none;
li {
display: inline-block;
margin: 0 auto;
background: #e9e9e9;
color: #303030;
padding: 10px;
text-decoration: none;
margin-bottom: 1px;
a {
display: table-cell;
}
}
}
}
}
// This is just a straightforward flexbox-based modal you can use as is, or to learn from and build-upon. I became frustrated doing over-ride css with the framework libraries out there (Foundation, Bootstrap, Semantic UI, etc.).
// OVERLAY
.slim_modal {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
@include flexbox;
@include align-items(center);
@include justify-content(center);
background: rgba(0,0,0,0.85);
z-index: 2;
display: none;
font-size: 1em;
@include transition(background, .5s, ease, .06s);
&.none {
background: rgba(10,10,10,0.0);;
}
&.red {
background: rgba(darken($red, 20%) ,.8);
}
&.tan {
background: rgba(darken($tan, 20%), .8);
}
&.green {
background: rgba(darken($green, 20%), .8);
}
// MODAL ITSELF
.sm_content {
@include MQ(XS) {padding: 0px;width: 100%;height: 100%;@include border-radius(0px);}
@include MQ(S) {padding: 0px;width: 100%;height: 100%;@include border-radius(0px);}
@include MQ(M) {padding: $sm_content_padding;width: 80%; max-height: 90%; height: auto;@include border-radius(4px);}
@include MQ(L) {padding: $sm_content_padding;width: 80%;max-height: 90%; height: auto; @include border-radius(4px);}
@include MQ(XL) {padding: $sm_content_padding;width: 80%;max-height: 90%; height: auto; @include border-radius(4px);}
background: darken($segment_color, 4%);
text-align: center;
max-width: 800px;
// MODAL INNER SECTION
.sm_content_inner_wrap {
position: relative;
margin: 0 auto;
height: 100%;
background: #ffffff;
@include box-shadow(0px, 0px, 1px, 0, rgba(30,30,30, .5));
z-index: 2;
@include MQ(XS) {@include border-radius(0px);}
@include MQ(S) {@include border-radius(0px);}
@include MQ(M) {@include border-radius(4px);}
@include MQ(L) {@include border-radius(4px);}
@include MQ(XL) {@include border-radius(4px);}
.sm_close_button {
padding: 10px;
width: auto;
display: block;
background: #efefef;
}
// MODAL AREAS
.sm_area_top, .sm_area_bottom, .sm_area_all {
padding: 4em;
h3 {
span {
display: block;
font-size: .7em;
}
}
}
.sm_area_top {
background: rgba(30,30,30, .02);
}
.sm_area_bottom {
background: rgba(255,255,255, 1);
}
}
// MODAL - Slide out icon menu...including a close button (".sm_close").
.sm_icon_menu {
ul {
list-style-type: none;
padding: 0;
margin: 0 auto;
li {
font-size: 1.1em;
height: 3em;
line-height: 3em;
background: darken(#ffffff, 10%);
padding: 0px 8px 0px 8px;
margin-bottom:1px;
color: rgba(30,30,30, .4);
@include transition(all, .5s, ease, 0s);
&.sm_close {
background: #ffffff;
}
&:nth-child(2) {
margin-top: 10px;
}
&:hover {
background: #ffffff;
color: rgba(30,30,30, .7);
}
&::last-child {
border: none;
}
}
}
&.is_right {
right: 0px;
@include border-radius(0px 4px 4px 0px);
@include MQ(XS) {top: 70px;right: 0px;z-index: 9;@include box-shadow(0px, 0px, 0px, 0px, rgba(30,30,30,0.0));padding: 1px;border: none;}
@include MQ(S) {top: 70px;right: 0px;z-index: 9;@include box-shadow(0px, 0px, 0px, 0px, rgba(30,30,30,0.0));padding: 1px;border: none;}
@include MQ(M) {top: $sm_content_padding;right: ($sm_content_padding );z-index: 1;@include box-shadow(15px, 0px, 30px, 0px, rgba(30,30,30,0.2));border: 1px solid rgba(30,30,30, .1);border-left: none;}
@include MQ(L) {top: $sm_content_padding;right: ($sm_content_padding);z-index: 1;@include box-shadow(15px, 0px, 30px, 0px, rgba(30,30,30,0.2));border: 1px solid rgba(30,30,30, .1);border-left: none;}
@include MQ(XL) {top: $sm_content_padding;right: ($sm_content_padding);z-index: 1;@include box-shadow(15px, 0px, 30px, 0px, rgba(30,30,30,0.2));border: 1px solid rgba(30,30,30, .1);border-left: none;}
}
&.is_left {
@include border-radius(4px 0px 0px 4px);
@include MQ(XS) {top: 70px;left: 0px;z-index: 9;@include box-shadow(0px, 0px, 0px, 0px, rgba(30,30,30,0.0));padding: 1px;border: none;}
@include MQ(S) {top: 70px;left: 0px;z-index: 9;@include box-shadow(0px, 0px, 0px, 0px, rgba(30,30,30,0.0));padding: 1px;border: none;}
@include MQ(M) {top: $sm_content_padding;left: ($sm_content_padding );z-index: 1;@include box-shadow(-15px, 0px, 30px, 0px, rgba(30,30,30,0.2));border: 1px solid rgba(30,30,30, .1);border-right: none;}
@include MQ(L) {top: $sm_content_padding;left: ($sm_content_padding);z-index: 1;@include box-shadow(-15px, 0px, 30px, 0px, rgba(30,30,30,0.2));border: 1px solid rgba(30,30,30, .1);border-right: none;}
@include MQ(XL) {top: $sm_content_padding;left: ($sm_content_padding);z-index: 1;@include box-shadow(-15px, 0px, 30px, 0px, rgba(30,30,30,0.2));border: 1px solid rgba(30,30,30, .1);border-right: none;}
}
opacity: 1;
box-sizing: border-box;
position: absolute;
top: 40px;
background: darken($segment_color, 4%);
@include transition(all, .3s, ease, 0s);
}
.sm_header {
box-sizing: border-box;
right: 0;
left: 0;
top: 0;
bottom: 0;
color: rgba(30,30,30, .7);
text-transform: uppercase;
margin: 0 auto;
display: inline-block;
height: $sm_header_height;
line-height: $sm_header_height;
opacity: 0;
@include transition(all, .3s, ease, 0s);
@include MQ(XS) {position: relative;width: 100%;background: darken(#ffffff, 10%);@include border-radius(0px);padding-top: 0;}
@include MQ(S) {position: relative;width: 100%;background: darken(#ffffff, 10%);@include border-radius(0px);padding-top: 0;}
@include MQ(M) {position: absolute;width: 90%;background: darken($segment_color, 4%);@include border-radius(4px 4px 0px 0px);padding-top: $sm_content_padding/2;text-align: center;}
@include MQ(L) {position: absolute;width: 90%;background: darken($segment_color, 4%);@include border-radius(4px 4px 0px 0px);padding-top: $sm_content_padding/2;text-align: center;}
@include MQ(XL) {position: absolute;width: 90%;background: darken($segment_color, 4%);@include border-radius(4px 4px 0px 0px);padding-top: $sm_content_padding/2;text-align: center;}
}
&.pushup {
@include transform(scale(.98) translateY(20px));
@include transition(all, .5s, ease, 0s);
@include box-shadow(0px, 0px, 0px, 0px, rgba(30,30,30,0.4));
opacity: 0;
&.show {
@include box-shadow(0px, 20px, 80px, 0px, rgba(30,30,30,0.4));
opacity: 1;
}
}
&.pushdown {
@include transform(scale(.98) translateY(-20px));
@include transition(all, .5s, ease, 0s);
@include box-shadow(0px, 0px, 0px, 0px, rgba(30,30,30,0.4));
opacity: 0;
&.show {
@include box-shadow(0px, -20px, 80px, 0px, rgba(30,30,30,0.4));
opacity: 1;
}
}
&.show {
@include transform(scale(1));
@include transition(all, .3s, ease, 0s);
.sm_icon_menu {
@include transition(all, .5s, ease, .06s);
&.is_right {
@include MQ(XS) {top: 70px;right: 0px;}
@include MQ(S) {top: 70px;right: 0px;}
@include MQ(M) {top: $sm_content_padding ;right: -25px;}
@include MQ(L) {top: $sm_content_padding ;right: -25px;}
@include MQ(XL) {top: $sm_content_padding;right: -25px;}
}
&.is_left {
@include MQ(XS) {top: 70px;left: 0px;}
@include MQ(S) {top: 70px;left: 0px;}
@include MQ(M) {top: $sm_content_padding ;left: -25px;}
@include MQ(L) {top: $sm_content_padding ;left: -25px;}
@include MQ(XL) {top: $sm_content_padding;left: -25px;}
}
}
.sm_header {
@include transition(top, .5s, ease, .1s);
@include MQ(XS) {top: 0px;z-index: 9;}
@include MQ(S) {top: 0px;z-index: 9}
@include MQ(M) {top: -$sm_header_height;z-index: 1;}
@include MQ(L) {top: -$sm_header_height;z-index: 1;}
@include MQ(XL) {top: -$sm_header_height;z-index: 1;}
opacity: 1;
&.detached {
@include transition(opacity, .5s, ease, .1s);
@include border-radius(4px);
background: rgba(0,0,0, .9);
color: rgba(255,255,255, .8);
@include MQ(XS) {top: 0px;z-index: 9;}
@include MQ(S) {top: 0px;z-index: 9}
@include MQ(M) {top: -($sm_header_height + 20);padding-top: 0;z-index: 1}
@include MQ(L) {top: -($sm_header_height + 20);padding-top: 0;z-index: 1}
@include MQ(XL) {top: -($sm_header_height + 20);padding-top: 0;z-index: 1}
}
}
}
}
}
.sm_content {
&.red {
background: $red;
.sm_header {
background: $red;
color: #ffffff;
}
}
&.tan {
background: $tan;
.sm_header{
background: $tan;
color: #ffffff;
}
}
&.green {
background: $green;
.sm_header {
background: $green;
color: #ffffff;
}
}
}
$(document).ready(function() {
$('.sm_open').on('click', function(){
var modal = $(this).attr('data-modal');
var modaloverlaycolor = $(this).attr('data-overlay');
var modaleffect = $(this).attr('data-effect');
var modalheader = $(this).attr('data-header');
var modalheadertype = $(this).attr('data-header-type');
var modalcontent = $(this).attr('data-content');
var modaliconside = $(this).attr('data-icons');
var modalwrappercolor = $(this).attr('data-wrapper-color');
$('#' + modal).addClass(modaloverlaycolor);
$('#' + modal + ' .sm_content').addClass(modaleffect);
$('#' + modal + ' .sm_content .sm_header').html(modalheader);
$('#' + modal + ' .sm_content .sm_header').addClass(modalheadertype);
$('#' + modal + ' .sm_content .sm_area_all').html(modalcontent);
$('#' + modal + ' .sm_icon_menu').addClass(modaliconside);
$('#' + modal + ' .sm_content').addClass(modalwrappercolor);
$('#' + modal).fadeIn().css("display", "flex");
setTimeout(function(){
$('#'+modal + ' .sm_content').addClass('show');
}, 400);
});
$('.sm_close').on('click', function(){
var $modal = $(this).parents('.slim_modal');
closeModal($modal);
});
$('.slim_modal').on('click', function(e) {
if (e.target !== this)
return;
var $modal = $(this);
closeModal($modal);
});
function closeModal($modal) {
$modal.find('.sm_content').removeClass('show');
setTimeout(function(){
$modal.removeClass('red green tan none');
$modal.find('.sm_content').removeClass('red green tan');
$modal.find('.sm_icon_menu').removeClass('is_right is_left');
$modal.find('.sm_header').removeClass('detached');
$modal.fadeOut();
}, 400);
}
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.