Friday, 6 September 2013

Is it good idea to create such modal windows for site?

Is it good idea to create such modal windows for site?

I want to create my own modals and found such way to do it. Is it good
way? What do you think abount this code?
This is start (some functions in order to modals work ) :
function( window, document, undefined ) {
var methods = {
// other methods
createE : function(elem, attr, styles) {
var element = document.createElement(elem);
if(attr) this.extend(element, attr);
if(styles) this.extend(element, styles, true);
return element;
},
append : function(node, elem, delAdd) {
if(delAdd) {
if( elem.length === undefined ) node.appendChild(elem) ;
if(checkArray(elem)) {
for( var i = 0; i < elem.length; i++) {
node.appendChild(elem[i]);
}
}
}else {
if( elem.length === undefined ) node.removeChild(elem) ;
if(checkArray(elem)) {
for( var i = 0; i < elem.length; i++) {
node.removeChild(elem[i]);
}
}
}
},
Next we can see code for modal box from the same object:
msgBox : function(setting, ajax) {
var wHeight = getDocWH()[1], wWidth = getDocWH()[0], docBody =
document.body;
var self = this;
var div = this.createE('div',
{ id : 'overlayU', className : 'Overlay' } ,
{ width : wWidth + 'px',
height : wHeight + 'px',
display : 'block'
});
var position =
[ ( wWidth - 410 ) / 2, 100 || setting['top'] ]
, execute = function(content) {
var divContent = self.createE('div', {
className : 'Outer',
innerHTML : '<div class="head_title"> \
<div class="msg">' + setting['title'] + '</\div><\/div> \
<div class="inner">' + content + '<\/div> <div class="buttons"> \
<button id="close" class="button msg_button"><b>' +
setting['button'] + '<\/b><\/button><\/div>'
}, {
left : position[0] + 'px',
top : position[1] + 'px',
display : 'block'
});
self.append( docBody , [ div, divContent ] , true );
self.el('aOverlay').onclick = function() {
self.append( docBody , [ div, divContent ] , false ); }
self.el('close').onclick = function() {
self.append( docBody , [ div, divContent ] , false ); }
}; !function() {
if(setting['ajax']) {
self.ajax.get(setting['ajax']['url'], function(response) {
if(response) execute(response);
else execute('Something is wrong with AJAX.'); });
}else{ execute(setting['massage'] );
}
})();
}
};
window.$ = methods; }) ( window, document );

No comments:

Post a Comment