<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pop-item {
padding: 5px;
background: #ff4413;
color: white;
z-index: 1;
margin: 10px;
}
.pop-block {
z-index: 2;
background: #35415d;
color: white;
position: absolute;
top: 100%;
left: 0;
padding: 10px;
}
.pop-block-close-panel {
text-align: right;
}
.pop-block-close {
font-size: 10px;
padding: 5px;
color: red;
}
.pop-text-block {
padding: 5px;
}
</style>
</head>
<body>
<div data-text="Pop 1" class="pop-item">POPBLOCK 1</div>
<div data-text="Pop 2" class="pop-item">POPBLOCK 2</div>
<div data-text="Pop 3" class="pop-item">POPBLOCK 3</div>
<script>
class Pop {
event = 'click';
closeEvent = null;
class = '';
parent = null;
closeButtonStyle = closeButton => {};
getText = item => { return ''};
open = item => {};
close = item => {};
constructor() {
}
generate() {
let list = document.getElementsByClassName(this.class);
Array.prototype.forEach.call(list, pop => {
let popBlock = document.createElement('div');
let popBlockClosePanel = document.createElement('div');
let popBlockClose = document.createElement('div');
let popTextBlock = document.createElement('div');
this.closeButtonStyle(popBlockClose);
popBlock.classList.add('pop-block');
popBlockClosePanel.classList.add('pop-block-close-panel');
popBlockClose.classList.add('pop-block-close');
popTextBlock.classList.add('pop-text-block');
popTextBlock.innerText = this.getText(pop);
pop.addEventListener(this.event, e => {
if (e.target === pop)
this.open(popBlock);
});
if (this.closeEvent !== null) {
pop.addEventListener(this.closeEvent, e => {
this.close(popBlock);
})
}
popBlockClose.onclick = e => {
this.close(popBlock);
};
popBlockClosePanel.appendChild(popBlockClose);
this.close(popBlock);
popBlock.appendChild(popBlockClosePanel);
popBlock.appendChild(popTextBlock);
if (this.parent === null) {
pop.appendChild(popBlock);
}
else {
this.parent.appendChild(popBlock);
}
});
}
}
document.addEventListener('DOMContentLoaded', () => {
let popMenu = new Pop();
popMenu.class = 'pop-item';
popMenu.event = 'click';
popMenu.closeEvent = 'mouseleave';
popMenu.open = item => {
item.style.display = 'block';
let parent = item.parentElement;
item.style.top = parent.offsetTop + parent.offsetHeight + 'px';
item.style.left = parent.offsetLeft + 'px';
};
popMenu.close = item => {
item.style.display = 'none';
};
popMenu.closeButtonStyle = closeButton => {
closeButton.innerHTML = 'X';
};
popMenu.getText = item => {
return item.dataset.text;
};
popMenu.generate();
});
</script>
</body>
</html>
Простой
