<script type="text/javascript">
(function () {
const PopupGenerator = {
init: function (options) {
this.options = Object.assign({
width: 400,
height: 300,
triggerTime: 0,
exitIntent: false,
content: '',
}, options);
this.createPopup();
this.bindEvents();
if (this.options.triggerTime > 0) {
setTimeout(() => this.showPopup(), this.options.triggerTime * 1000);
}
},
createPopup: function () {
this.overlay = document.createElement('div');
this.overlay.style.position = 'fixed';
this.overlay.style.top = '0';
this.overlay.style.left = '0';
this.overlay.style.width = '100%';
this.overlay.style.height = '100%';
this.overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
this.overlay.style.display = 'none';
this.overlay.style.zIndex = '9998';
this.overlay.style.transition = 'opacity 0.3s ease-in-out';
document.body.appendChild(this.overlay);
this.popup = document.createElement('div');
this.popup.style.position = 'fixed';
this.popup.style.width = `${this.options.width}px`;
this.popup.style.height = `${this.options.height}px`;
this.popup.style.top = '50%';
this.popup.style.left = '50%';
this.popup.style.transform = 'translate(-50%, -50%)';
this.popup.style.backgroundColor = '#fff';
this.popup.style.boxShadow = '0 10px 20px rgba(0, 0, 0, 0.3)';
this.popup.style.padding = '20px';
this.popup.style.borderRadius = '8px';
this.popup.style.zIndex = '9999';
this.popup.style.display = 'none';
this.popup.style.opacity = '1';
this.popup.style.transition = 'transform 0.3s ease, opacity 0.3s ease';
document.body.appendChild(this.popup);
const closeButton = document.createElement('button');
closeButton.textContent = '×';
closeButton.style.position = 'absolute';
closeButton.style.top = '10px';
closeButton.style.right = '10px';
closeButton.style.background = 'none';
closeButton.style.border = 'none';
closeButton.style.fontSize = '20px';
closeButton.style.cursor = 'pointer';
closeButton.style.fontWeight = 'bold';
closeButton.style.color = '#333';
closeButton.style.transition = 'color 0.2s';
closeButton.addEventListener('click', () => this.closePopup());
this.popup.appendChild(closeButton);
if (this.options.content.startsWith('http')) {
const iframe = document.createElement('iframe');
iframe.src = this.options.content;
iframe.style.width = '100%';
iframe.style.height = '100%';
iframe.style.border = 'none';
this.popup.appendChild(iframe);
} else {
const contentBox = document.createElement('div');
contentBox.innerHTML = this.options.content;
contentBox.style.fontFamily = 'Arial, sans-serif';
contentBox.style.color = '#444';
this.popup.appendChild(contentBox);
}
},
bindEvents: function () {
if (this.options.exitIntent) {
document.addEventListener('mouseout', (e) => {
if (e.clientY <= 0) {
this.showPopup();
}
});
}
},
showPopup: function () {
this.overlay.style.display = 'block';
this.popup.style.display = 'block';
this.overlay.style.opacity = '1';
this.popup.style.opacity = '1';
this.popup.style.transform = 'translate(-50%, -50%) scale(1)';
},
closePopup: function () {
this.overlay.style.display = 'none';
this.popup.style.display = 'none';
},
};
PopupGenerator.init({
width: 500,
height: 400,
triggerTime: 5,
exitIntent: true,
content: '',
});
})();
</script>
