3

我对 Joomla 不是很有经验。这就是为什么我需要你的建议。这个想法是在弹出窗口中显示系统消息。

解决方案：

1.我删除了文件libraries\joomla\document\html\renderer\message.php中的下一行，因为我不需要这个div

$buffer .= "\n<div id=\"system-message-container\">";
$buffer .= "\n</div>";

2.在index.php中我替换了

<jdoc:include type=”message” />

和

<?php if ($this->getBuffer('message')) : ?>
<?php
    $message = $this->getBuffer('message');
    $script  = '<div id="popup"><div id="popup-inner">'.$message.'</div></div><div id="popup-mask"></div>';
    echo $script;
?>
<?php endif; ?>

div#popup 用于弹出本身， div#popup-mask 用于叠加

3. 我在 CSS 中设置了 #popup 和 #popup-mask 的样式

#popup-mask {position: absolute; top: 0; left: 0; z-index: 9997; background: url(../images/bg-overlay.png);}
#popup {position: fixed; width: 400px; top: 40%; left: 50%; margin-left: -200px; z-index: 9999; background: #e6e6e6; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;}

4.并添加了一些jQuery

jQuery.fn.showMask = function () {
    var maskHeight = jQuery(document).height();
    var maskWidth = jQuery(window).width();
    jQuery(this).css({'width':maskWidth,'height':maskHeight});
};
jQuery(document).ready(function() {
    if (jQuery('#popup-mask').length){
        jQuery('#popup-mask').showMask();
        jQuery('#popup-mask').click(function () {
            jQuery(this).hide();
            jQuery('#popup').hide();
        });
        jQuery(window).resize (function() {
           jQuery('#popup-mask').showMask();
        });
}
});

它有效，但正如我已经提到的，我对 Joomla 很陌生。

所以，问题是：

- 这个解决方案好吗？

- 如何改进？

4

2 回答 2

4

我想建议您不要更改joomla的核心文件，除非您出于某些原因确实需要这样做。对于您的情况，您可以尝试一下它可能会对您有所帮助。

  1. 如果需要，添加默认的 Joomla 系统消息代码如果这是您正在使用的现有模板，它可能已经有系统消息代码，它将显示 Joomla 的系统消息：

代码：

<jdoc:include type=”message” />

如果它不存在，您通常希望将其添加到此代码的正上方：

代码：

<jdoc:include type=”component” />
  1. 加载 Mootools，它将创建动画弹出模式消息 在开始标记之后，添加以下代码：

JHTML:: ('behavior.mootools'); JHTML:: ('behavior.modal');

注意：如果您收到 Mootools 冲突错误，您的站点可能已经在加载 Mootools。尝试删除这部分代码。

  1. 添加 JavaScript 代码以自动“弹出”系统消息“在 CLOSING 标记之前添加此代码：

脚本：

<script type=”text/javascript”&gt;
window.addEvent(‘domready’, function(){
if( $(‘system-message’) ){
SqueezeBox.initialize();
SqueezeBox.open( $(‘system-message’), {
handler: ‘adopt’,
shadow: true,
overlayOpacity: 0.5,
size: {x: 600, y: 100},
onOpen: function(){
$(‘system-message’).setStyle(‘visibility’, ‘visible’);
}
});
}
});
</script>

根据您的需要，您可以更改您的JAVASCRIPT和CSS.

于 2012-12-01T08:05:55.283 回答
0

除非你真的需要，否则我不会推荐 hack。在这种情况下，我认为你不需要。相反，这应该适合你：

将您的系统消息包装在一个 DIV 中（在您的模板 index.php 文件中），如下所示：

<div d="systmsg" onclick="javascript:this.style.display='none';"><jdoc:include type="message" /></div>

然后是一些CSS：

#systmsg {
position:absolute;
text-align:center;
width:100%;
top:300px (what you want)
}

#system-message {
display:block;
width:(what you want);
max-height:(what you want);
margin-left:auto;
margin-right:auto;
z-index: 100;
}

可以在此处找到此示例的链接。

于 2012-12-01T00:54:55.047 回答