【问题标题】:Bootstrap alert closing on page load页面加载时关闭引导警报
【发布时间】:2018-05-17 17:31:58
【问题描述】:

我有一个视图,我在其中发送一些消息,如下所示:

messages.warning(request, 'Nothing found")

在我的settings.py 中,我编辑了如下消息标签:

MESSAGE_TAGS = {
    messages.DEBUG: 'alert-info',
    messages.INFO: 'alert-info',
    messages.SUCCESS: 'alert-success',
    messages.WARNING: 'alert-warning',
    messages.ERROR: 'alert-danger'
}

在我的模板上,我这样显示它们:

{% for message in messages %}
    <div class="alert {{ message.tags }} alert-dismissible fade in">
        <button type="button" class="close" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        {% if message.tags == 'info' %}
            <p>{{ message }}<br>
                You have <strong>{{users}}</strong> user{{users|pluralize}}<br>
         ,around <strong>{{non_users}}</strong> non user{{non_users|pluralize}}</p>
        {% else %}
            <p>{{ message }}</p>
        {% endif %}
    </div>
{% endfor %}

当模板加载时,消息会很快出现然后消失。

如果我尝试这个:&lt;p&gt;{{message}}&lt;/p&gt; 而不是消息停留在那里,所以我猜我在引导程序上做错了。

这(有点)也可以:&lt;div class="{{message.tags}}"&gt;

有人能解释一下吗?

编辑:

我刚刚注意到这是在我使用messages.error() 时发生的,其余的都正常工作,似乎找不到问题所在。

【问题讨论】:

  • 点击关闭按钮时是否要销毁消息?
  • 是的,它应该已经这样做了,但似乎 alert 类正在破坏某些东西。

标签: django twitter-bootstrap twitter-bootstrap-3 django-messages


【解决方案1】:

试试这个,类是alert-{{tag}},它将呈现alert-info,没有空格

{% for message in messages %}
    <div class="alert alert-{{message.tags}} page-alert">
        <button type="button" class="close" data-dismiss='alert'>
             <span aria-hidden="true"> × </span>
             <span class="sr-only">Close</span>
        </button>
        <p>{{message}}</p> 
    </div>
{% endfor %}

【讨论】:

  • 我的消息标签已经被格式化为这样显示它
  • 那么,到底是什么问题?
  • 似乎alert 类正在触发关闭 div 的东西。我没有 js 代码可以做到这一点。
  • 你有这种方式alert alert-{{message.tags}}而不是alert {{message.tags}}吗?
  • 它应该显示为alert {{message.tags}},它转换为alert alert-warning
猜你喜欢
  • 2017-05-04
  • 1970-01-01
  • 1970-01-01
  • 2022-01-03
  • 1970-01-01
  • 1970-01-01
  • 2014-05-30
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多