EZModal testing
Testing out my EZModal object
by SmokeyPHP
HTML
<div id="modalContents">
<h1>My popup</h1>
<p>This is an awesome modal window.</p>
</div>
CSS
#modalContents {
display: none;
}
JavaScript
EZModal = {
config: {
ID: 'ezmodal'
,width: 500
,height: 'auto'
,paddingVert: 10
,paddingHoriz: 10
}
,exists: function() {
return this.getElem()!==null;
}
,getElem: function(createIfNull) {
var ret = document.getElementById(this.config.ID);
if(createIfNull === true && ret === null)
{
ret = this.create();
}
return ret;
}
,open: function(content) {
EZModalOverlay.show();
var modalElem = this.getElem(true);
modalElem.innerHTML = content;
modalElem.style.display = 'block';
if(this.config.height == 'auto')
{
modalElem.style.marginTop = -((modalElem.offsetHeight+this.config.paddingVert)/2)+'px';
}
}
,close: function() {
EZModalOverlay.hide();
var modalElem = this.getElem();
modalElem.style.display = 'none';
}
,create: function() {
if(this.exists())
{
return this.getElem();
}
else
{
var modal = document.createElement('div');
modal.id = this.config.ID;
modal.style.position = 'fixed';
modal.style.top = '50%';
modal.style.left = '50%';
modal.style.width = this.config.width+'px';
if(this.config.height != 'auto') modal.style.height = this.config.height+'px';
modal.style.marginLeft = -((this.config.width+this.config.paddingHoriz)/2)+'px';
if(this.config.height != 'auto') modal.style.marginTop = -((this.config.height+this.config.paddingVert)/2)+'px';
modal.style.backgroundColor = 'rgb(255,255,255)';
modal.style.border = '1px solid #111';
modal.style.borderRadius = '5px';
modal.style.display = 'none';
modal.style.padding = this.config.paddingVert+'px '+this.config.paddingHoriz+'px';
document.body.appendChild(modal);
return modal;
}
}
}
EZModalOverlay = {
config: {
ID: 'ezmodal-overlay'
,opacity: 70
}
,exists: function() {
return this.getElem()!==null;
}
,getElem: function(createIfNull) {
var ret = document.getElementById(this.config.ID);
if(createIfNull === true && ret === null)
{
ret = this.create();
}
return ret;
}
,show:...