prettified generic menu
This commit is contained in:
parent
baaf4dd0b4
commit
fb7152cb10
1 changed files with 29 additions and 42 deletions
|
|
@ -37,50 +37,37 @@ define(function(require, exports, module) {
|
||||||
* @param {string|number} left absolute position value.
|
* @param {string|number} left absolute position value.
|
||||||
*/
|
*/
|
||||||
module.exports.overlayPage = function overlayPage (contentElement, top, right, bottom, left) {
|
module.exports.overlayPage = function overlayPage (contentElement, top, right, bottom, left) {
|
||||||
var div = document.createElement('div');
|
top = (top) ? 'top: ' + top + ';' : '';
|
||||||
|
bottom = (bottom) ? 'bottom: ' + bottom + ';' : '';
|
||||||
|
right = (right) ? 'right: ' + right + ';' : '';
|
||||||
|
left = (left) ? 'left: ' + left + ';' : '';
|
||||||
|
|
||||||
|
var closer = document.createElement('div');
|
||||||
var contentContainer = document.createElement('div');
|
var contentContainer = document.createElement('div');
|
||||||
contentContainer.style.cssText = 'margin: 0px; padding: 0px; border: 0px;' +
|
|
||||||
'overflow: auto;';
|
closer.style.cssText = 'margin: 0; padding: 0; ' +
|
||||||
contentElement.style.cssText = contentElement.style.cssText + 'overflow: auto;';
|
'position: absolute; top:0; bottom:0; left:0; right:0;' +
|
||||||
contentContainer.appendChild(contentElement);
|
'z-index: 9990; ' +
|
||||||
|
'background-color: rgba(0, 0, 0, 0.1);';
|
||||||
var cl = document.createElement('img');
|
closer.addEventListener('click', function () {
|
||||||
if (top) {
|
closer.parentNode.removeChild(closer);
|
||||||
top = 'top: ' + top + ';';
|
closer = null;
|
||||||
} else {
|
|
||||||
top = '';
|
|
||||||
}
|
|
||||||
if (right) {
|
|
||||||
right = 'right: ' + right + ';';
|
|
||||||
} else {
|
|
||||||
right = '';
|
|
||||||
}
|
|
||||||
if (bottom) {
|
|
||||||
bottom = 'bottom: ' + bottom + ';';
|
|
||||||
} else {
|
|
||||||
bottom = '';
|
|
||||||
}
|
|
||||||
if (left) {
|
|
||||||
left = 'left: ' + left + ';';
|
|
||||||
} else {
|
|
||||||
left = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
cl.src = '/BigRedX.png';
|
|
||||||
cl.style.cssText = 'margin: 5px 5px 0 0; padding: 0; ' +
|
|
||||||
'float: right; width: 25px; height: 25px; border: 1px solid black;';
|
|
||||||
div.style.cssText = 'margin:0; padding:0; position: absolute;' +
|
|
||||||
top + right + bottom + left +
|
|
||||||
'z-index:9999; background-color:white; color:black; overflow: auto;';
|
|
||||||
|
|
||||||
div.appendChild(cl);
|
|
||||||
div.appendChild(contentContainer);
|
|
||||||
document.body.appendChild(div);
|
|
||||||
|
|
||||||
cl.addEventListener('click', function () {
|
|
||||||
div.parentNode.removeChild(div);
|
|
||||||
div = null;
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
contentContainer.style.cssText = 'margin: 0; padding: 0; ' +
|
||||||
|
'position: absolute;' +
|
||||||
|
top + right + bottom + left +
|
||||||
|
'z-index: 9991; ' +
|
||||||
|
'box-shadow: rgba(126, 126, 126, 0.25) -20px 10px 25px; ' +
|
||||||
|
'background-color: rgba(255, 255, 255, 0.6);' +
|
||||||
|
'color: black; overflow: auto;';
|
||||||
|
contentContainer.addEventListener('click', function (e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
});
|
||||||
|
|
||||||
|
contentContainer.appendChild(contentElement);
|
||||||
|
closer.appendChild(contentContainer);
|
||||||
|
document.body.appendChild(closer);
|
||||||
};
|
};
|
||||||
|
|
||||||
});
|
});
|
||||||
Loading…
Add table
Add a link
Reference in a new issue