在DJango中显示带有关闭按钮的即时消息

y1aodyip  于 2022-12-05  发布在  Go
关注(0)|答案(6)|浏览(134)

我想在Django中显示带有关闭按钮的flash消息。Django中现有的消息框架允许显示消息,但不允许关闭它。
作为一个例子,web2py提供了这样的flash消息。我正在Django中寻找类似的功能。

如果用几行代码就能完成,那就太好了。我不想在Django上添加任何其他的库或框架。
先谢谢你。

qxgroojn

qxgroojn1#

我不知道这样的事情可以解决使用引导程序!
我做了这样的事情:

{% if messages %}
  {% for msg in messages %}
    <div class="alert alert-info alert-dismissable">
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
      {{msg.message}}
    </div>
  {% endfor %}
{% endif %}

它显示的消息如下:

rn0zuynd

rn0zuynd2#

在html模板中添加此jquery超时函数

<script>
    $(document).ready(function(){
window.setTimeout(function() {
  $(".alert").fadeTo(500, 0).slideUp(500, function(){
      $(this).remove();
  });
}, 5000);
});
</script>
kx5bkwkv

kx5bkwkv3#

Q.解除按钮在django python的警告消息中不起作用
回答:data-bs-dismiss=“alert”,这是Bootstrap 5中的变更,即在另一个bootstrap版本中有data-dismiss=“alert”,但在bootstrap 5中添加了bs,因此添加bs,如下所示data-bs-dismiss=“alert”

txu3uszq

txu3uszq4#

如果您使用bootstrap 5,请使用此命令。

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

在旧版本的bootstrap中,如果您有data-dismiss="alert",请将其更改为

data-bs-dismiss="alert"

更多文档请访问bootstrap 5解散

yebdmbv4

yebdmbv45#

如果你正在使用materializecss,你可以借助chip

<div class="chip" style="display: contents;">
    <div class="card-panel red darken-1 ">
        <i class="material-icons white-text">info</i>
        <span class="white-text text-darken-2" style="vertical-align: super; font-size: large;">
            {{message}}
        </span>
       <i class="close material-icons white-text right">close</i>
    </div>
</div>

4dbbbstv

4dbbbstv6#

正如**@jeevu94**正确指出的那样,我建议以一种更干燥的方式使用它,以适合每个消息的设置。

{% if messages %}

{% for message in messages %}

<div class="container-fluid p-0">
  <div class="alert {{ message.tags }} alert-dismissible" role="alert" >
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="x"></button>
    {{ message }}
  </div>
</div>

{% endfor %}

{% endif %}

相关问题