CODEWITHSUNDEEP
javascripthtmlcssalert
user9433918
user9433918

Reputation:

Alert box is not closing when trying to do so

I've copied this code and the alert box appears but it doesn't seem to close when I click on the "x", here's the code:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link rel="stylesheet" href="css/bootstrap.css">
  <script src="js/jquery.js"></script>
  <script src="js/bootstrap.js"></script>
</head>
<body>
  <div class="container-fluid">
    <div class="alert alert-danger">
     <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>The File will be deleted!
    </div>
  </div>
</body>
</html>

Librarys: this is the way I imported them

Upvotes: 0

Views: 1307

Answers (4)

S K
S K

Reputation: 452

Did you import jquery,Bootstrap correctly (path) ? It is working for me.

<!DOCTYPE html>
<html>
<head>
  <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container-fluid">
    <div class="alert alert-danger">
     <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>The File will be deleted!
    </div>
  </div>
</body>
</html>

Upvotes: 0

mostafa tourad
mostafa tourad

Reputation: 4388

The problem :- you don't include bootstrap js file that will do all the work for you

The solution :- you should include the file

take a look at this link from the bootstrap documentation https://getbootstrap.com/docs/4.0/components/alerts/#dismissing

You'll find this line

Be sure you’ve loaded the alert plugin, or the compiled Bootstrap JavaScript.

also try to put the script files in the bottom of your HTML 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
  <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container-fluid">
    <div class="alert alert-danger">
     <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>The File will be deleted!
    </div>
  </div>
</body>

Upvotes: 0

A.Samad Salaat
A.Samad Salaat

Reputation: 73

Your libraries seems to be the problem this code is working correctly check it

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div class="container">
      <div class="alert alert-success alert-dismissible">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
        <strong>Success!</strong> This alert box could indicate a successful or positive action.
      </div>
      </div>
    </body>
    </html>

Upvotes: 2

CodeRed
CodeRed

Reputation: 51

Try to move your script tags out of the head-tag and down into the body-tag tag just before the closing body tag.

It's considered bad practice to have the script tags in the head because they might run before the whole DOM has been loaded.

Upvotes: 0

Related Questions