(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) {
w = meta.sizing.width != undefined ? meta.sizing.width : w;
h = meta.sizing.height != undefined ? meta.sizing.height : h;
}
/*convert it all to percent so the modal resizes with the window*/
w = (w / wWidth) * 100;
l = (100 - w) / 2;
t = (t / wHeight) * 100;
modal = {
width: w,
height: h,
top : meta.top != undefined && meta.top != "auto" ? (meta.top / wHeight) * 100 : t,
left : l
};
return modal;
},
setIframe: function (metadata, href) {
var modal_id = $('#' + helpers.idList.container),
iframe = $('<iframe id="' + helpers.idList.iframe + '" class="' + helpers.classes.iframe + '"></iframe>'),
iframeHeight;
$(iframe).attr('src', href);
if (typeof metadata.iframe === 'object') {
$(iframe).attr(metadata.iframe);
}
if (typeof metadata.iframe.css === 'object') {
$(iframe).css(metadata.iframe.css);
}
$(modal_id).find('.' + helpers.classes.content).addClass('modal__content--hasIframe').append(iframe);
if (metadata.iframe.height != undefined) {
iframeHeight = metadata.iframe.height != undefined ? metadata.iframe.height : metadata.iframe.css.height;
iframeHeight += 20;
} else {
iframeHeight = "95%";
$(modal_id).find('.' + helpers.classes.content + ' iframe').css({
height: iframeHeight
});
}
$(modal_id).find('.' + helpers.classes.content).css({
height: iframeHeight
});
},
showOverlay: function (meta) {
var overlay = meta.overlay != undefined ? meta.overlay : 0.5;
$('#' + helpers.idList.overlay).css({'display' : 'block', opacity : 0 }).attr('data-referrer', meta.referrer);
$('#' + helpers.idList.overlay).fadeTo(200, overlay);
},
setModalCSS: function (modal_id, meta) {
var modal = modalWindow.getDimensions(meta);
$(modal_id).css({
'display' : 'block',
'position' : 'fixed',
'opacity' : 0,
'z-index': 9999,
'left' : modal.left + '%',
'width' : modal.width + "%",
'top' : modal.top + "%",
'overflow' : 'visible'
});
if (meta.css != undefined) {
$(modal_id).css(meta.css);
}
},
setModalContentHeight: function (modal_id, meta) {
var modal = modalWindow.getDimensions(meta),
titleHeight = $(modal_id).find('.' + helpers.classes.header).height(),
contentHeight = modal.height - titleHeight,
unit = typeof (modal.height) != 'number' ? '' : 'px';
if (meta.iframe != undefined) {
contentHeight = contentHeight < meta.iframe.height ? meta.iframe.height : contentHeight;
contentHeight = parseInt(contentHeight, 10);
contentHeight += 20;
}
$(modal_id).find('.' + helpers.classes.content).css({
'height': contentHeight + unit
});
},
addCloseButton: function (modal_id, meta) {
if ($(modal_id).find('.' + helpers.classes.close).index() == -1) {
if (meta.closebutton != 'undefined' && meta.closebutton != 'false') {
$(helpers.domEls.close).attr('data-referrer', meta.referrer);
$(modal_id).prepend(helpers.domEls.close);
}
}
$(modal_id).on('click', close.init);
},
addModalTitle: function (modal_id, meta) {
if (meta.title != 'undefined') {
var title = meta.title;
if ($(modal_id).find('.' + helpers.classes.header).index() != -1) {
$(modal_id).find('.' + helpers.classes.header).html(title);
} else {
title = $(helpers.domEls.modalTitle).html(title);
$(modal_id).find('.' + helpers.classes.content).before(title);
}
}
},
showModal: function (metadata) {
$(metadata.modal_id).fadeTo(200, 1);
$(metadata.modal_id).attr('data-referrer', metadata.referrer).addClass('modal__container');
}
};
close = {
init: function (e) {
var _this = close,
modalReference = $(e.target).attr('data-referrer');
_this.closeOverlay();
_this.hideContainer();
_this.cleanContainer(modalReference);
_this.hideModalTrigger();
},
helpers: {
clearClasses: function (modalReference) {
$('.' + helpers.classes.hasIframe).removeClass('modal__content--hasIframe');
$('.modal__container, [data-referrer="modal_id"]').removeAttr("style");
$('[data-referrer="' + modalReference + '"].modal__container').removeClass(helpers.classes.container);
},
clearContent: function () {
var domEls = helpers.domEls;
$(domEls.modalContent).html('');
$('.' + helpers.classes.iframe).remove();
$('.' + helpers.classes.close).remove();
$('#modal__container .modal__header--added').remove();
}
},
closeOverlay: function () {
$('#' + helpers.idList.overlay).fadeOut(200);
},
hideModalTrigger: function () {
if (window.modalTrigger !== undefined) {
var modalTrigger = '[data-modal="' + window.modalTrigger + '"]';
$(modalTrigger).parent().fadeOut(400, 'linear');
}
},
hideContainer: function () {
var $container = $('#' + helpers.idList.container),
$containerFrames = $container.find('iframe');
$container.hide("fast");
if ($containerFrames.length > 0) {
$containerFrames.each(function () {
var src = $(this).attr('src');
$(this).attr('src', '').attr('src', src);
});
}
},
cleanContainer: function (modalReference) {
close.helpers.clearClasses(modalReference);
close.helpers.clearContent();
}
};
setup = {
init: function (metadata) {
this.addModal();
this.addOverlay(metadata);
},
addModal: function () {
var domEls = helpers.domEls;
if ($('#' + helpers.idList.container).index() == -1) {
$(domEls.Container).append(domEls.modalContent);
$(domEls.Container).prepend(domEls.close);
$("body").append(domEls.Container);
}
},
addOverlay: function (metadata) {
var overlay = helpers.domEls.overlay;
if ($('.' + helpers.classes.overlay).index() == -1) {
$("body").append(overlay);
}
$('.' + helpers.classes.overlay).on('click',close.init);
},
launchModal: function (el, metadata) {
var href = $(el).attr('href') != undefined ? $(el).attr('href') : metadata.src,
modal_id = metadata.src != undefined ? modalWindow.getModalId(metadata.src) : modalWindow.getModalId($(el).attr('href'));
metadata.modal_id = modal_id;
modalWindow.addCloseButton(modal_id, metadata);
modalWindow.addModalTitle(modal_id, metadata);
if (metadata.iframe && metadata.iframe !== false) {
modalWindow.setIframe(metadata, href);
}
modalWindow.showOverlay(metadata);
modalWindow.setModalCSS(modal_id, metadata);
modalWindow.setModalContentHeight(modal_id, metadata);
modalWindow.showModal(metadata);
if (metadata.hideTrigger == "true") {
window.modalTrigger = $(el).attr('data-modal');
}
}
};
$(this).each(function (i, el) {
if ($(el).attr('id') == null) {
$(el).attr('id', 'flexModal-' + i);
}
var metadata = !$(el).data('modal') ? {iframe: true} : $(el).data('modal'),
attrs = document.getElementById($(el).attr('id')).attributes,
l = attrs.length,
modalEventTrigger = options !== undefined && options.trigger !== undefined ? options.trigger : 'click',
attr,
elName;
for (i = 0; i < l; i++) {
attr = attrs.item(i);
if (attr.nodeName.match('data-modal-')) {
elName = attr.nodeName.replace('data-modal-', '');
metadata[elName] = attr.nodeValue;
}
}
metadata.referrer = $(el).attr('id');
jQuery.extend(metadata, options);
setup.init(metadata);
if (modalEventTrigger !== 'query') {
$(el).on(modalEventTrigger, function (e) {
e.preventDefault();
setup.launchModal($(el), metadata);
});
} else {
metadata.iframe = false;
setup.launchModal($(el), metadata);
}
});
}
});
}(jQuery));
$('[data-modal]').flexModal()
$('.openModal').flexModal()
<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">
<p>Multiple Properties </p>
<code>
{
"top": "20px",
"overlay": "0.5",
"sizing": {
"height" : "700",
"width" : "500"
},
"src" : "#content"
}
</code>
<a class="list__item__link" data-modal='{"top": "20", "overlay": "0.5","sizing": {"height" : "700", "width" : "500"}, "src" : "#content"}'>Click Me</a>
</li>
</ul>
<h2>Using multiple attributes</h2>
<ul class="list">
<li class="list__item">
<p>Multipled Attributes:
</p>
<code>
data-modal='{ "overlay": "0.5"}'
data-modal-sizing="auto"
data-modal-closebutton="false"
</code>
<a class="list__item__link" href="#veggies" rel="leanModal" data-modal='{"overlay": "0.5"}' data-modal-sizing="auto" data-modal-closebutton="false">Click Me</a>
</li>
<li class="list__item">
<p>A title and a scrolling iframe. with autosizing. Title in own attr</p>
<a class="list__item__link" href="http://www.nationwide.com" data-modal-title="Heres a test title"
data-modal-sizing='{"height": "auto"}'
data-modal='{ "iframe": {"scrolling" : "auto" }}'>Click Me</a>
</li>
<li class="list__item">
<p>href is a media manager video. title is set, and iframe is seamless, as own property. </p>
<a class="list__item__link" href="http://nationwide.dist.sdlmedia.com/vms/distribution/?o=E7E0EC8B-2D34-4F80-A46B-FC9BB90280CD"
data-modal='{"title": "An iframed video from media manager"}' data-modal-iframe='{"seamless" : "seamless"}'>Click Me</a>
</li>
<li class="list__item">
<p>Media manager video. Title is set, along with src. It's seamless. </p>
<a class="list__item__link" data-modal='{"title": "Media manager Video", "src":"http://nationwide.dist.sdlmedia.com/vms/distribution/?o=E7E0EC8B-2D34-4F80-A46B-FC9BB90280CD", "iframe" : {"seamless" : "seamless"}}'>Video</a>
</li>
</ul>
<button class="video openModal" href="http://nationwide.dist.sdlmedia.com/vms/distribution/?o=25072CAB-C6FA-4FAE-97ED-150A899C3AE6">View Video</button>
<div id="veggies" class="modal__container">
<h3 class="modal__header"> Menu content</h3>
<div class="modal__content">
<p>
Veggies sunt bona vobis, proinde vos postulo esse magis quandong wattle seed kombu
silver beet turnip courgette turnip greens coriander caulie salad lentil parsnip
daikon seakale wakame pumpkin parsley.
</p>
<p>Kale parsnip turnip greens lotus root black-eyed pea carrot dulse chard gumbo amaranth
brussels sprout watercress aubergine bush tomato. Chickpea chicory green bean
water chestnut taro beetroot cucumber gram pea sprouts pea radish tomato cauliflower.
Sierra leone bologi rutabaga amaranth broccoli tomatillo collard greens broccoli
rabe corn seakale.
</p>
</div>
</div>
<div id="content" class="modal__container">
<h3 class="modal__header">Sites content</h3>
<div class="modal__content">
<p>Some other content that I can see an play with</p>
<p>Kale parsnip turnip greens lotus root black-eyed pea carrot dulse chard gumbo amaranth
brussels sprout watercress aubergine bush tomato. Chickpea chicory green bean
water chestnut taro beetroot cucumber gram pea sprouts pea radish tomato cauliflower.
Sierra leone bologi rutabaga amaranth broccoli tomatillo collard greens broccoli
rabe corn seakale.
</p>
</div>
</div>
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 ;
background-image:url('/img/fancybox_sprite.png') !important;
background-position:-265px -59px;
background-repeat:no-repeat;
overflow:hidden
}
.modal__close:active{
box-shadow:none}