吐司消息未打开

时间:2019-09-22 10:41:57

标签: javascript html bootstrap-4

因此,每当我单击应该打开自举吐司的按钮时,我都会遇到问题,并且如果我在吐司类中指定show来显示它而没有单击该按钮,则关闭按钮不会起作用工作和烤面包没有关闭;这是代码:

HTML

LocalVariableType VariableDeclaratorId [= VariableInitializer];

JAVASCRIPT

<button id="button1" class="btn btn-info">Click me!</button>

<div id="alert" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

1 个答案:

答案 0 :(得分:0)

只需更改javascript代码。 将此代码行$('#alert').show('fade');更改为$('.toast').toast('show');

$(document).ready(function(){
  $("#button1").click(function(){
    $('.toast').toast('show');
  });
});

正在工作的jsfiddle链接Bootstrap Tooltip