How to create the popup in an easy way?
<?php if ($this->canShow()): ?>
<script type="text/javascript">
//<![CDATA[
var messagePopupClosed = false;
function openMessagePopup() {
var height = $(‘html-body‘).getHeight();
$(‘message-popup-window-mask‘).setStyle({‘height‘:height+‘px‘});
toggleSelectsUnderBlock($(‘message-popup-window-mask‘), false);
Element.show(‘message-popup-window-mask‘);
$(‘message-popup-window‘).addClassName(‘show‘);
}
function closeMessagePopup() {
toggleSelectsUnderBlock($(‘message-popup-window-mask‘), true);
Element.hide(‘message-popup-window-mask‘);
$(‘message-popup-window‘).removeClassName(‘show‘);
messagePopupClosed = true;
}
Event.observe(window, ‘load‘, openMessagePopup);
Event.observe(window, ‘keyup‘, function(evt) {
if(messagePopupClosed) return;
var code;
if (evt.keyCode) code = evt.keyCode;
else if (evt.which) code = evt.which;
if (code == Event.KEY_ESC) {
closeMessagePopup();
}
});
//]]>
</script>
<div id="message-popup-window-mask" style="display:none;"></div>
<div id="message-popup-window" class="message-popup">
<div class="message-popup-head">
<a href="#" onclick="closeMessagePopup(); return false;" title="<?php echo $this->getCloseText(); ?>"><span><?php echo $this->getCloseText(); ?></span></a>
<h2><?php echo $this->getHeaderText(); ?></h2>
</div>
<div class="message-popup-content">
<div class="message">
<span class="message-icon message-<?php echo $this->getSeverityText();?>" style="background-image:url(<?php echo $this->getSeverityIconsUrl() ?>);"><?php echo $this->getSeverityText();?></span>
<p class="message-text"><?php echo $this->getNoticeMessageText(); ?></p>
</div>
<p class="read-more"><a href="<?php echo $this->getNoticeMessageUrl(); ?>" onclick="this.target=‘_blank‘;"><?php echo $this->getReadDetailsText(); ?></a></p>
</div>
</div>
<?php endif; ?>