mirror of
https://github.com/ethereum/go-ethereum.git
synced 2026-07-25 06:06:44 +00:00
Display modal window on uploading
This commit is contained in:
Ihar Shaduryn
parent
92e2cf3b96
commit
d0beff6ee0
5 changed files with 311 additions and 10 deletions
|
|
@ -110,6 +110,9 @@ function onUploadingComplete(uri) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleFiles(files) {
|
function handleFiles(files) {
|
||||||
|
jQuery('#preview-modal').modal({
|
||||||
|
fadeDuration: 250
|
||||||
|
});
|
||||||
uploadFile(files, 0, "");
|
uploadFile(files, 0, "");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1"/>
|
<meta name="viewport" content="width=device-width,initial-scale=1"/>
|
||||||
<link rel="shortcut icon" href="images/favicon.ico"/>
|
<link rel="shortcut icon" href="images/favicon.ico"/>
|
||||||
<script src="jquery.js"></script>
|
<script src="jquery.js"></script>
|
||||||
|
<script src="jquery.modal.js" type="text/javascript" charset="utf-8"></script>
|
||||||
<script>
|
<script>
|
||||||
$.noConflict();
|
$.noConflict();
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -16,8 +17,15 @@
|
||||||
<script src="index.js" type="text/javascript"></script>
|
<script src="index.js" type="text/javascript"></script>
|
||||||
|
|
||||||
<link href="index.css" rel="stylesheet" type="text/css"/>
|
<link href="index.css" rel="stylesheet" type="text/css"/>
|
||||||
|
<link rel="stylesheet" href="jquery.modal.css" type="text/css" media="screen"/>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
<div id="preview-modal" style="display:none; text-align: center">
|
||||||
|
<p>Uploading photos..</p>
|
||||||
|
<img style="text-align: center; padding-top: 20px" src="" id="currentPreview">
|
||||||
|
</div>
|
||||||
|
|
||||||
<noscript>
|
<noscript>
|
||||||
<h2>Frak! JavaScript required :'(</h2>
|
<h2>Frak! JavaScript required :'(</h2>
|
||||||
</noscript>
|
</noscript>
|
||||||
|
|
|
||||||
|
|
@ -2,8 +2,7 @@
|
||||||
// Copyright(c) 2003-2014 by wave++ "Yuri D'Elia" <wavexx@thregr.org>
|
// Copyright(c) 2003-2014 by wave++ "Yuri D'Elia" <wavexx@thregr.org>
|
||||||
// Distributed under GPL2 (see COPYING) WITHOUT ANY WARRANTY.
|
// Distributed under GPL2 (see COPYING) WITHOUT ANY WARRANTY.
|
||||||
var datafile = 'data.json';
|
var datafile = 'data.json';
|
||||||
var padding = 100;
|
var padding = 20;
|
||||||
var marginTop = 50;
|
|
||||||
var duration = 500;
|
var duration = 500;
|
||||||
var thrdelay = 1500;
|
var thrdelay = 1500;
|
||||||
var hidedelay = 3000;
|
var hidedelay = 3000;
|
||||||
|
|
@ -42,7 +41,6 @@ var eback; // background
|
||||||
var enoise; // additive noise
|
var enoise; // additive noise
|
||||||
var eflash; // flashing object
|
var eflash; // flashing object
|
||||||
var ehdr; // header
|
var ehdr; // header
|
||||||
var progress; // progress
|
|
||||||
var elist; // thumbnail list
|
var elist; // thumbnail list
|
||||||
var fscr; // thumbnail list scroll fx
|
var fscr; // thumbnail list scroll fx
|
||||||
var econt; // picture container
|
var econt; // picture container
|
||||||
|
|
@ -233,7 +231,7 @@ function resizeMainImg(img)
|
||||||
img.setStyles(
|
img.setStyles(
|
||||||
{
|
{
|
||||||
'position': 'absolute',
|
'position': 'absolute',
|
||||||
'top': (contSize.y / 2 - img.height / 2) + marginTop,
|
'top': contSize.y / 2 - img.height / 2,
|
||||||
'left': contSize.x / 2 - img.width / 2
|
'left': contSize.x / 2 - img.width / 2
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -364,9 +362,6 @@ function onMainReady()
|
||||||
ehdr.set('html', dsc.join(' '));
|
ehdr.set('html', dsc.join(' '));
|
||||||
ehdr.setStyle('display', (dsc.length? 'block': 'none'));
|
ehdr.setStyle('display', (dsc.length? 'block': 'none'));
|
||||||
|
|
||||||
progress.set('html', '<img id="currentPreview">');
|
|
||||||
progress.set('style', 'text-align: center; padding-top: 20px');
|
|
||||||
|
|
||||||
// complete thumbnails
|
// complete thumbnails
|
||||||
var d = duration;
|
var d = duration;
|
||||||
if(first !== false)
|
if(first !== false)
|
||||||
|
|
@ -601,9 +596,6 @@ function initGallery(data)
|
||||||
ehdr = new Element('div', { id: 'header' });
|
ehdr = new Element('div', { id: 'header' });
|
||||||
ehdr.inject(econt);
|
ehdr.inject(econt);
|
||||||
|
|
||||||
progress = new Element('div', { id: 'progress' });
|
|
||||||
progress.inject(econt);
|
|
||||||
|
|
||||||
elist = new Element('div', { id: 'list' });
|
elist = new Element('div', { id: 'list' });
|
||||||
elist.inject(emain);
|
elist.inject(emain);
|
||||||
|
|
||||||
|
|
|
||||||
70
swarm/examples/album/jquery.modal.css
Normal file
70
swarm/examples/album/jquery.modal.css
Normal file
|
|
@ -0,0 +1,70 @@
|
||||||
|
.blocker {
|
||||||
|
position: fixed;
|
||||||
|
top: 0; right: 0; bottom: 0; left: 0;
|
||||||
|
width: 100%; height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
z-index: 1;
|
||||||
|
padding: 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: rgb(0,0,0);
|
||||||
|
background-color: rgba(0,0,0,0.75);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.blocker:before{
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
height: 100%;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-right: -0.05em;
|
||||||
|
}
|
||||||
|
.blocker.behind {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
.modal {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
width: 400px;
|
||||||
|
background: #fff;
|
||||||
|
padding: 15px 30px;
|
||||||
|
-webkit-border-radius: 8px;
|
||||||
|
-moz-border-radius: 8px;
|
||||||
|
-o-border-radius: 8px;
|
||||||
|
-ms-border-radius: 8px;
|
||||||
|
border-radius: 8px;
|
||||||
|
-webkit-box-shadow: 0 0 10px #000;
|
||||||
|
-moz-box-shadow: 0 0 10px #000;
|
||||||
|
-o-box-shadow: 0 0 10px #000;
|
||||||
|
-ms-box-shadow: 0 0 10px #000;
|
||||||
|
box-shadow: 0 0 10px #000;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal a.close-modal {
|
||||||
|
position: absolute;
|
||||||
|
top: -12.5px;
|
||||||
|
right: -12.5px;
|
||||||
|
display: block;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
text-indent: -9999px;
|
||||||
|
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAABGdBTUEAANjr9RwUqgAAACBjSFJNAABtmAAAc44AAPJxAACDbAAAg7sAANTIAAAx7AAAGbyeiMU/AAAG7ElEQVR42mJkwA8YoZjBwcGB6fPnz4w/fvxg/PnzJ2N6ejoLFxcX47Rp036B5Dk4OP7z8vL+P3DgwD+o3v9QjBUABBALHguZoJhZXV2dVUNDgxNIcwEtZnn27Nl/ZmZmQRYWFmag5c90dHQY5OXl/z98+PDn1atXv79+/foPUN9fIP4HxRgOAAggRhyWMoOwqKgoq6GhIZe3t7eYrq6uHBDb8/Pz27Gysloga/jz588FYGicPn/+/OapU6deOnXq1GdgqPwCOuA31AF/0S0HCCB0xAQNBU4FBQWB0NBQublz59oADV37Hw28ePHi74MHD/6ii3/8+HEFMGQUgQ6WEhQU5AeZBTWTCdkigABC9ylIAZeMjIxQTEyMysaNG/3+/v37AGTgr1+//s2cOfOXm5vbN6Caz8jY1NT0a29v76/v37//g6q9sHfv3khjY2M5YAgJgsyEmg0PYYAAQreUk4+PT8jd3V1l1apVgUAzfoIM2rlz5x9gHH5BtxAdA9PB1zNnzvyB+R6oLxoopgC1nBPZcoAAgiFQnLIDMb+enp5iV1eXBzDeHoI0z58//xcwIX0mZCkMg9S2trb+hFk+ffr0QCkpKVmQ2VA7QHYxAgQQzLesQMwjIiIilZWVZfPu3bstMJ+SYikyBmUzkBnA9HEMyNcCYgmQHVC7mAACCJagOEBBbGdnp7lgwYJEkIavX7/+BcY1SvAaGRl9tba2xohjMTGxL8nJyT+AWQsuxsbG9vnp06e/QWYdPHiwHmiWKlBcCGQXyNcAAQSzmBuoSQqYim3u37+/EKR48uTJv5ANB+bVr7Dga2xs/AkTV1JS+gq0AJyoQIkPWU9aWtoPkPibN2/2A/l6QCwJ9TULQADB4hcY//xKXl5eHt++fbsAUmxhYYHiM1DiAsr9R7ZcVVUVbikIdHd3/0TWIyws/AWYVsByAgICdkAxRSAWAGI2gACClV7C4uLiOv7+/lEgRZ8+ffqLLd6ABck3ZMuB6uCWrlu37je29HDx4kVwQisvL88FFqkaQDERUHADBBAomBl5eHiYgQmLE1hSgQQZgIUD1lJm69atf4HR8R1YKoH5QIPAWWP9+vV/gOI/gHkeQw+wGAXTwAJJ5t+/f/BUDRBA4NIEKMDMyMjICtQIiniG379/4yza7t69+//Lly8oDrty5co/bJaCAEwcZCkwwTJDLWYCCCCwxcDgY3z16hXDnTt3voP4EhISWA0BFgZMwNqHExh3jMiG1tbWsgHjnA2bHmAeBtdWwOL1MycnJ7wAAQggBmi+kgIW/OaKiorJwOLuFShO0LMSMPF9AUYBSpz6+vqixHlOTs4P9MIEWHaDsxSwYMoE2mEGFJcG5SKAAGJCqjv/AbPUn8ePH98ACQQHB6NUmZqamkzABIgSp5s3bwbHORCA1QDLAWZkPc7OzszA8oHl5cuXVy5duvQBGIXwWgoggGA+FgO6xkBNTS28r69vDrT2+Y1cIMDyJchX6KkXVEmAshd6KB06dAic94EO3AzkBwGxPhCLg8ptgACCZyeQp9jZ2b2AmsuAefM8tnxJCk5ISPgOLTKfAdNEOVDMA2QHLDsBBBC8AAFlbmCLwlZISCg5JSVlJizeQAaQaimoWAUFK0g/sGGwHiiWCMS2yAUIQAAxI7c4gEmeFZi4OJ48ecLMzc39CRiEmgEBASxA/QzA8vYvAxEgNjaWZc2aNezAsprp2LFjp4FpZRdQ+AkQvwLij0AMSoC/AQIIXklAC3AVUBoBxmE8sPXQAiyvN8J8fuPGjR/h4eHf0eMdhkENhOPHj8OT+NGjR88BxZuBOA5kJtRseCUBEECMSI0AdmgBDooDaaDl8sASTSkyMlKzpqZGU1paGlS7MABLrX83b978A6zwwakTmE0YgIkSnHpBfGCV+gxYh98qKSk5CeTeAxVeQPwUiN8AMSjxgdLNX4AAYkRqCLBAXcMHtVwSaLkMMMHJAvOq9IQJE9R8fHxElJWV1bEF8aNHj+7t27fvLTDlXwXGLyhoH0OD+DnU0k/QYAa1QP8BBBAjWsuSFWo5LzRYxKFYAljqiAHzqxCwIBEwMTERBdZeoOYMA7Bl+RFYEbwB5oS3IA9D4/IFEL+E4nfQ6IDFLTgvAwQQI5ZmLRtSsINSuyA0uwlBUyQPMPWD20/AKo8ByP4DTJTfgRgUjB+gFoEc8R6amGDB+wu5mQsQQIxYmrdMUJ+zQTM6NzQEeKGO4UJqOzFADQMZ/A1qCSzBfQXi71ALfyM17sEAIIAY8fQiWKAYFgIwzIbWTv4HjbdfUAf8RPLhH1icojfoAQKIEU8bG9kRyF0aRiz6YP0k5C4LsmUY9TtAADEyEA+IVfufGEUAAQYABejinPr4dLEAAAAASUVORK5CYII=") no-repeat 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-spinner {
|
||||||
|
display: none;
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin-right: -32px;
|
||||||
|
margin-top: -32px;
|
||||||
|
background: url("data:image/gif;base64,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") #111 no-repeat center center;
|
||||||
|
-webkit-border-radius: 8px;
|
||||||
|
-moz-border-radius: 8px;
|
||||||
|
-o-border-radius: 8px;
|
||||||
|
-ms-border-radius: 8px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
228
swarm/examples/album/jquery.modal.js
Normal file
228
swarm/examples/album/jquery.modal.js
Normal file
|
|
@ -0,0 +1,228 @@
|
||||||
|
/*
|
||||||
|
A simple jQuery modal (http://github.com/kylefox/jquery-modal)
|
||||||
|
Version 0.7.0
|
||||||
|
*/
|
||||||
|
(function($) {
|
||||||
|
|
||||||
|
var modals = [],
|
||||||
|
getCurrent = function() {
|
||||||
|
return modals.length ? modals[modals.length - 1] : null;
|
||||||
|
},
|
||||||
|
selectCurrent = function() {
|
||||||
|
var i,
|
||||||
|
selected = false;
|
||||||
|
for (i=modals.length-1; i>=0; i--) {
|
||||||
|
if (modals[i].$blocker) {
|
||||||
|
modals[i].$blocker.toggleClass('current',!selected).toggleClass('behind',selected);
|
||||||
|
selected = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$.modal = function(el, options) {
|
||||||
|
var remove, target;
|
||||||
|
this.$body = $('body');
|
||||||
|
this.options = $.extend({}, $.modal.defaults, options);
|
||||||
|
this.options.doFade = !isNaN(parseInt(this.options.fadeDuration, 10));
|
||||||
|
this.$blocker = null;
|
||||||
|
if (this.options.closeExisting)
|
||||||
|
while ($.modal.isActive())
|
||||||
|
$.modal.close(); // Close any open modals.
|
||||||
|
modals.push(this);
|
||||||
|
if (el.is('a')) {
|
||||||
|
target = el.attr('href');
|
||||||
|
//Select element by id from href
|
||||||
|
if (/^#/.test(target)) {
|
||||||
|
this.$elm = $(target);
|
||||||
|
if (this.$elm.length !== 1) return null;
|
||||||
|
this.$body.append(this.$elm);
|
||||||
|
this.open();
|
||||||
|
//AJAX
|
||||||
|
} else {
|
||||||
|
this.$elm = $('<div>');
|
||||||
|
this.$body.append(this.$elm);
|
||||||
|
remove = function(event, modal) { modal.elm.remove(); };
|
||||||
|
this.showSpinner();
|
||||||
|
el.trigger($.modal.AJAX_SEND);
|
||||||
|
$.get(target).done(function(html) {
|
||||||
|
if (!$.modal.isActive()) return;
|
||||||
|
el.trigger($.modal.AJAX_SUCCESS);
|
||||||
|
var current = getCurrent();
|
||||||
|
current.$elm.empty().append(html).on($.modal.CLOSE, remove);
|
||||||
|
current.hideSpinner();
|
||||||
|
current.open();
|
||||||
|
el.trigger($.modal.AJAX_COMPLETE);
|
||||||
|
}).fail(function() {
|
||||||
|
el.trigger($.modal.AJAX_FAIL);
|
||||||
|
var current = getCurrent();
|
||||||
|
current.hideSpinner();
|
||||||
|
modals.pop(); // remove expected modal from the list
|
||||||
|
el.trigger($.modal.AJAX_COMPLETE);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.$elm = el;
|
||||||
|
this.$body.append(this.$elm);
|
||||||
|
this.open();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$.modal.prototype = {
|
||||||
|
constructor: $.modal,
|
||||||
|
|
||||||
|
open: function() {
|
||||||
|
var m = this;
|
||||||
|
this.block();
|
||||||
|
if(this.options.doFade) {
|
||||||
|
setTimeout(function() {
|
||||||
|
m.show();
|
||||||
|
}, this.options.fadeDuration * this.options.fadeDelay);
|
||||||
|
} else {
|
||||||
|
this.show();
|
||||||
|
}
|
||||||
|
$(document).off('keydown.modal').on('keydown.modal', function(event) {
|
||||||
|
var current = getCurrent();
|
||||||
|
if (event.which == 27 && current.options.escapeClose) current.close();
|
||||||
|
});
|
||||||
|
if (this.options.clickClose)
|
||||||
|
this.$blocker.click(function(e) {
|
||||||
|
if (e.target==this)
|
||||||
|
$.modal.close();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
close: function() {
|
||||||
|
modals.pop();
|
||||||
|
this.unblock();
|
||||||
|
this.hide();
|
||||||
|
if (!$.modal.isActive())
|
||||||
|
$(document).off('keydown.modal');
|
||||||
|
},
|
||||||
|
|
||||||
|
block: function() {
|
||||||
|
this.$elm.trigger($.modal.BEFORE_BLOCK, [this._ctx()]);
|
||||||
|
this.$body.css('overflow','hidden');
|
||||||
|
this.$blocker = $('<div class="jquery-modal blocker current"></div>').appendTo(this.$body);
|
||||||
|
selectCurrent();
|
||||||
|
if(this.options.doFade) {
|
||||||
|
this.$blocker.css('opacity',0).animate({opacity: 1}, this.options.fadeDuration);
|
||||||
|
}
|
||||||
|
this.$elm.trigger($.modal.BLOCK, [this._ctx()]);
|
||||||
|
},
|
||||||
|
|
||||||
|
unblock: function(now) {
|
||||||
|
if (!now && this.options.doFade)
|
||||||
|
this.$blocker.fadeOut(this.options.fadeDuration, this.unblock.bind(this,true));
|
||||||
|
else {
|
||||||
|
this.$blocker.children().appendTo(this.$body);
|
||||||
|
this.$blocker.remove();
|
||||||
|
this.$blocker = null;
|
||||||
|
selectCurrent();
|
||||||
|
if (!$.modal.isActive())
|
||||||
|
this.$body.css('overflow','');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
show: function() {
|
||||||
|
this.$elm.trigger($.modal.BEFORE_OPEN, [this._ctx()]);
|
||||||
|
if (this.options.showClose) {
|
||||||
|
this.closeButton = $('<a href="#close-modal" rel="modal:close" class="close-modal ' + this.options.closeClass + '">' + this.options.closeText + '</a>');
|
||||||
|
this.$elm.append(this.closeButton);
|
||||||
|
}
|
||||||
|
this.$elm.addClass(this.options.modalClass).appendTo(this.$blocker);
|
||||||
|
if(this.options.doFade) {
|
||||||
|
this.$elm.css('opacity',0).show().animate({opacity: 1}, this.options.fadeDuration);
|
||||||
|
} else {
|
||||||
|
this.$elm.show();
|
||||||
|
}
|
||||||
|
this.$elm.trigger($.modal.OPEN, [this._ctx()]);
|
||||||
|
},
|
||||||
|
|
||||||
|
hide: function() {
|
||||||
|
this.$elm.trigger($.modal.BEFORE_CLOSE, [this._ctx()]);
|
||||||
|
if (this.closeButton) this.closeButton.remove();
|
||||||
|
var _this = this;
|
||||||
|
if(this.options.doFade) {
|
||||||
|
this.$elm.fadeOut(this.options.fadeDuration, function () {
|
||||||
|
_this.$elm.trigger($.modal.AFTER_CLOSE, [_this._ctx()]);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.$elm.hide(0, function () {
|
||||||
|
_this.$elm.trigger($.modal.AFTER_CLOSE, [_this._ctx()]);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.$elm.trigger($.modal.CLOSE, [this._ctx()]);
|
||||||
|
},
|
||||||
|
|
||||||
|
showSpinner: function() {
|
||||||
|
if (!this.options.showSpinner) return;
|
||||||
|
this.spinner = this.spinner || $('<div class="' + this.options.modalClass + '-spinner"></div>')
|
||||||
|
.append(this.options.spinnerHtml);
|
||||||
|
this.$body.append(this.spinner);
|
||||||
|
this.spinner.show();
|
||||||
|
},
|
||||||
|
|
||||||
|
hideSpinner: function() {
|
||||||
|
if (this.spinner) this.spinner.remove();
|
||||||
|
},
|
||||||
|
|
||||||
|
//Return context for custom events
|
||||||
|
_ctx: function() {
|
||||||
|
return { elm: this.$elm, $blocker: this.$blocker, options: this.options };
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$.modal.close = function(event) {
|
||||||
|
if (!$.modal.isActive()) return;
|
||||||
|
if (event) event.preventDefault();
|
||||||
|
var current = getCurrent();
|
||||||
|
current.close();
|
||||||
|
return current.$elm;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Returns if there currently is an active modal
|
||||||
|
$.modal.isActive = function () {
|
||||||
|
return modals.length > 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
$.modal.defaults = {
|
||||||
|
closeExisting: true,
|
||||||
|
escapeClose: true,
|
||||||
|
clickClose: true,
|
||||||
|
closeText: 'Close',
|
||||||
|
closeClass: '',
|
||||||
|
modalClass: "modal",
|
||||||
|
spinnerHtml: null,
|
||||||
|
showSpinner: true,
|
||||||
|
showClose: true,
|
||||||
|
fadeDuration: null, // Number of milliseconds the fade animation takes.
|
||||||
|
fadeDelay: 1.0 // Point during the overlay's fade-in that the modal begins to fade in (.5 = 50%, 1.5 = 150%, etc.)
|
||||||
|
};
|
||||||
|
|
||||||
|
// Event constants
|
||||||
|
$.modal.BEFORE_BLOCK = 'modal:before-block';
|
||||||
|
$.modal.BLOCK = 'modal:block';
|
||||||
|
$.modal.BEFORE_OPEN = 'modal:before-open';
|
||||||
|
$.modal.OPEN = 'modal:open';
|
||||||
|
$.modal.BEFORE_CLOSE = 'modal:before-close';
|
||||||
|
$.modal.CLOSE = 'modal:close';
|
||||||
|
$.modal.AFTER_CLOSE = 'modal:after-close';
|
||||||
|
$.modal.AJAX_SEND = 'modal:ajax:send';
|
||||||
|
$.modal.AJAX_SUCCESS = 'modal:ajax:success';
|
||||||
|
$.modal.AJAX_FAIL = 'modal:ajax:fail';
|
||||||
|
$.modal.AJAX_COMPLETE = 'modal:ajax:complete';
|
||||||
|
|
||||||
|
$.fn.modal = function(options){
|
||||||
|
if (this.length === 1) {
|
||||||
|
new $.modal(this, options);
|
||||||
|
}
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Automatically bind links with rel="modal:close" to, well, close the modal.
|
||||||
|
$(document).on('click.modal', 'a[rel="modal:close"]', $.modal.close);
|
||||||
|
$(document).on('click.modal', 'a[rel="modal:open"]', function(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
$(this).modal();
|
||||||
|
});
|
||||||
|
})(jQuery);
|
||||||
Loading…
Reference in a new issue