CODEWITHSUNDEEP
javascripthtmlbootstrap-4
user11588249
user11588249

Reputation:

Toast message doesn't open

so I have a problem whenever I click on a button that is supposed opening a bootstrap toast it doesn't work and if i specify show in the toast class to show it without clicking on the button, the close button doesn't work and the toast doesn't close; here is the code:

HTML

<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>

JAVASCRIPT

$(document).ready(function(){

    $('#button1').click(function() {
        $('#alert').show('fade');
    });
});

Upvotes: 0

Views: 617

Answers (1)

Raihan Uddin
Raihan Uddin

Reputation: 156

Just change the javascript code . change this line of code $('#alert').show('fade'); to $('.toast').toast('show');

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

working jsfiddle link Bootstrap Tooltip

Upvotes: 1

Related Questions