How to make a closing alert in Bootstrap

358
April 26, 2017, at 2:00 PM

I would like to make a closing alert by using Bootstrap. The alert was showing correctly, but I could not close it. Is there something wrong in this code? Thanks.

<div class="alert alert-warning alert-dismissable">
   <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
   <strong>Warning!</strong>
</div>
Answer 1

Make sure you have added jquery and bootstrapjs files in your project

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class=container> 
  <div class="alert alert-warning alert-dismissable"> 
    <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a> 
    <strong>Warning!</strong> 
  </div> 
</div>

Answer 2

JQUERY

REMOVE

$('#alert-container').children('.alert:first-child').remove();

APPEND

$('#alert-container').append('<div class="alert alert-block fade in"><button type="button" class="close" data-dismiss="alert">&times;</button><h4>Info!</h4>'+ message +'</div>');
Rent Charter Buses Company
READ ALSO
java script customize dialog box

java script customize dialog box

I want to show a dialog box in center and remove the "the host name says

343
SVG element not being responsive - when screen resized

SVG element not being responsive - when screen resized

I have a map-container which shows world map, that is supposed to be responsive but it does not work when I run it and resize the page, I cant find whats the issuewhat it is expected when screen is resized

362
Add on to previous styles with element.style

Add on to previous styles with element.style

I have an html element that has a set style

284