Smart Modal

Elastic Modal window that's controllable from the HTML and the JavaScript

by Frank Taylor

HTML

<button class="video openModal" href="http://nationwide.dist.sdlmedia.com/vms/distribution/?o=25072CAB-C6FA-4FAE-97ED-150A899C3AE6">View Video</button>
<h1 class="h1"><code>flexModal</code> Examples</h1>
<h1>Simple Examples</h1>
<ul class="list examples">
    <li class="list__item">
        <p>Close button removed</p>
        <code>
data-modal='{"closebutton" : "false"}'
        </code>
        <a class="list__item__link" href="#veggies" data-modal='{"closebutton" : "false"}'>Click Me</a>
    </li>
    <li class="list__item">
        <p>Close button Present</p>
<code>data-modal='{"closebutton" : "true"}'
</code>
        <a class="list__item__link" href="#veggies" data-modal='{"closebutton" : "true"}'>Click Me</a>
    </li>
    <li class="list__item">
        <p>
            Changed the overlay. 
        </p>
<code>data-modal='{ "overlay": "0.1"}'</code>
        <a class="list__item__link" href="#content" data-modal='{ "overlay": "0.1"}'>Click Me</a>
    </li>
    <li class="list__item">
        <p>Sizing Auto
        </p>
<code>data-modal='{"sizing" : "auto"}'</code>
        <a class="list__item__link" href="#veggies" data-modal='{"sizing" : "auto"}'>Click Me</a>
    </li>
    <li class="list__item">
        <p>Src is set in data-modal</p>
<code>data-modal='{"src" : "#content"}'</code>
        <a class="list__item__link" data-modal='{"src" : "#content"}'>Click Me</a>
    </li>
    <li class="list__item">
        <p>Src set in data-modal, top also set </p>
<code>data-modal='{"top": "100px", "src" : "#content"}'</code>
        <a class="list__item__link" data-modal='{"top": "100", "src" : "#content"}'>Click Me</a>
    </li>
    <li class="list__item">
        <p>An Href and a seamless iframe</p>
        <code>
href="http://nationwide.com"
data-modal='{"iframe": {"seamless": "true"} }'
        </code>
        <a class="list__item__link" href="http://nationwide.com" data-modal='{"iframe": {"seamless": "true"} }'>Click me</a>
    </li>
    <li class="list__item">
    ...

CSS

html,
body {
  font-size: 1em;
  font-size: 1rem;
  line-height: 1.618;
}
p,
ul,
li,
a,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}
[contenteditable] {
  display: block;
  outline: 1px dotted #808080;
}
.list {
  list-style-type: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
}
.list__item {
  display: flex;
  flex-basis: calc(32% - .618rem);
  flex-grow: 1;
  list-style-type: none;
  border: 1px solid #ccc;
  margin: 0.618rem;
  flex-direction: column;
  justify-content: space-around;
}
.list__item__link {
  text-decoration: none;
  color: #285978;
  display: block;
  padding: 0.618em;
}
.modal__overlay{
	display:none;
	position:fixed;
	z-index:9998;
	top:0;
	left:0;
	height:100%;
	width:100%;
	background:#000
}
#modal__container{
	display: none
}
.modal__container{
	display: none;
	color: #333;
	padding:15px;
	border:1px solid #1a3d6e;
	border-radius: 4px;
	margin: 0;
	background:#f9f9f9;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.modal__header{
	font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
    margin: 0;
    padding:0;
}
.modal__content{
	max-height:500px;
	overflow-x:hidden;
	overflow-y:auto;
}
.modal__content--hasIframe{
	overflow-y:visible;
	max-height:inherit
}
.modal__content__iframe{
	width:98%;
	margin:.618em auto
}
.modal__content > {
	margin:.618em auto
}
#modal__close,
.modal__close,
#modal__close.modal__close{
	display:block;
	float:right;
	position:relative;
	top:-24px;
	left:24px;
    text-decoration: none;
    text-align: center;
	color:#193d63;
	font-weight:bold;
    line-height: 1.8;
	padding:.25em;
	width:36px;
	height:36px;
	border-radius:50%;
	background:white !important;
	background-position:-265px -19px;
	background-repeat:no-repeat;
	overflow:hidden;
}
#modal__close.modal__close:hover,
#modal__close.modal__close:focus,
#modal__close.modal__close:active{
	color:#193d63;
	text-decoration:none;
	background-color: none !important...

JavaScript

(function ($) {
    $.fn.extend({
        flexModal: function (options) {
            var helpers, modalWindow, setup, close;
            helpers = {
                domEls : {
                    overlay : $("<div id='modal__overlay' class='modal__overlay'></div>"),
                    Container : $('<div id="modal__container" class="modal__container"></div>'),
                    close : $('<a href="#" id="modal__close" class="modal__close">X</a>'),
                    modalContent : $('<div id="modal__content" class="modal__content"></div>'),
                    modalTitle : $('<h3 class="modal__header modal__header--added"></h3>')
                },
                classes : {
                    overlay: 'modal__overlay',
                    container: 'modal__container',
                    close: 'modal__close',
                    content: 'modal__content',
                    header: 'modal__header',
                    iframe: 'modal__content__iframe',
                    hasIframe: 'modal__content--hasIframe'
                },
                idList: {
                    overlay: 'modal__overlay',
                    container: 'modal__container',
                    close: 'modal__close',
                    content: 'modal__content',
                    iframe: 'modal__content__iframe'
                }
            };
            modalWindow = {
                getModalId: function (url) {
                    return (url.indexOf('#') != 0) ? "#" + helpers.idList.container : url;
                },
                getDimensions: function (meta) {
                    var wWidth = $(window).width(),
                        wHeight = $(window).height(),
                        t = (wHeight - (wHeight / 1.618)) / 2,
                        w = wWidth / 1.618,
                        h = wHeight / 1.618,
                        l,
                        modal = {};
                    if (meta.sizing != 'auto' && meta.sizing != undefined) {
            ...