Question

我正在尝试使用以下标记显示一条简单的Flash消息here：

<p data-control="flash-message" data-interval="5" class="success">
    This message is created from a static element. It will go away in 5 seconds.
</p>

我希望在加载页面后出现一条flash消息，但我只看到显示该消息的静态文本。所以似乎有些javascript或css没有正确加载。我查看了firebug，并确认已加载jquery.js，bootstrap.js，app.js，framework.js和framework.extras.js个文件。为了让flash消息出现，还有什么我需要做的吗？

Answer 1

These docs请参阅后端 用户界面（我承认，该页面上的内容并不完全明显，以及其他人已经similarly confused了。看来你正试图在前端页面中使用它。

虽然framework.js和framework-extras.js似乎在后端和前端中同等使用（如果{% framework %}或{%framework extras %}指令正确放置在模板中，对于前端），在两个世界中暴露相同的AJAX API ，后端UI中有很多CSS和JS，你在前端没有正常访问，批量包含在{十月安装根目录下的{1}}和modules/system/assets/ui/storm-min.js个文件。

我认为相关CSS的重要部分是这个（来自modules/system/assets/ui/storm.css）：

modules/system/assets/ui/storm.css

在页面加载时执行的Flash消息逻辑必须在#layout-canvas .flash-message{display:none} .flash-message{position:fixed;width:500px;left:50%;top:13px;margin-left:-250px;color:#ffffff;font-size:14px;padding:10px 30px 10px 15px;z-index:10300;word-wrap:break-word;text-shadow:0 -1px 0px rgba(0,0,0,0.15);text-align:center;-webkit-box-shadow:0 1px 6px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.24);box-shadow:0 1px 6px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.24);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px} .flash-message.fade{opacity:0;filter:alpha(opacity=0);-webkit-transition:all 0.5s,width 0s;transition:all 0.5s,width 0s;-webkit-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9)} .flash-message.fade.in{opacity:1;filter:alpha(opacity=100);-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)} .flash-message.success{background:#8da85e} .flash-message.error{background:#cc3300} .flash-message.warning{background:#f0ad4e} .flash-message.info{background:#5fb6f5} .flash-message button{float:none;position:absolute;right:10px;top:8px;color:white;outline:none} .flash-message button:hover{color:white} .flash-message.static{position:static !important;width:auto !important;display:block !important;margin-left:0 !important;-webkit-box-shadow:none;box-shadow:none}中的某处，幸运的是，它还可以作为非缩小版本modules/system/assets/ui/storm-min.js存在，您可以在其中找到行

modules/system/assets/ui/storm.js

并从那里进一步查看引用的=require js/flashmessage.js，你会发现这些行到最后：

modules/system/assets/ui/js/flashmessage.js

瞧！

所以你可以在你的前端页面中包含整个// FLASH MESSAGE DATA-API // =============== $(document).render(function(){ $('[data-control=flash-message]').each(function(){ $.oc.flashMsg($(this).data(), this) }) })和storm.css（我试过，它可以工作 - 尽管消息在加载时可见，然后是＃34;闪现＆＃34 ;并且设置得恰当，因此您需要进行一些调整），或者从那里您可以找出您可能需要提取和调整的代码部分，以使其在前端可行。但是我认为为你的前端使用自己编写内容更明智，而不是包含那些旨在集成在后端UI中的大量代码。

（似乎整个storm.js JQuery的东西都是用于后端使用的，但不完全确定。）

Flash消息在octobercms中不起作用

1 个答案: