Bootstrap close button not working on default bootstrap modal open-CodePudding

The issue is that on page load modal popup. When I click on the close button it is not working. It is not closing the modal but when I click outside the modal it closes. I simply want the modal to close when I click on the cross button. You can use the thing anything you want.

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function(){
        $("#myModal1").modal('show');
    });
</script>
    
                         <!-- Google Tag Manager -->
    
    <!-- End Google Tag Manager -->
    
    

    <!-- 3rd party CSS -->
    <link href="static/css/bootstrap.min2f35.css?25799" rel="stylesheet">
    <link href="static/css/bootstrap-select.min2f35.css?25799" rel="stylesheet">
    <link href="static/css/fontawesome-all.min2f35.css?25799" rel="stylesheet">
    
    <!--I18Njs-->
   
    <!--End I18Njs-->

    <!-- Latest compiled and minified CSS -->
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

        <!-- jQuery library -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>

        <!-- Popper JS -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

        <!-- Latest compiled JavaScript -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    
    
    <!-- Our CSS, always last -->
     
    <link href="static/css/light2f35.css?25799" rel="stylesheet">
    <link href="static/css/dark2f35.css?25799" rel="stylesheet">
    <link href="static/css/charts2f35.css?25799" rel="stylesheet">
    <link href="static/css/custom2f35.css?25799" rel="stylesheet">
    <link href="static/css/styles2f35.css?25799" rel="stylesheet">
    <link href="static/css/style2f35.css?25799" rel="stylesheet">

    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <link rel="preconnect" href="https://cointraffic.io/">

    <script async src="../serving.stat-rock.com/player.js"></script>
    <script src="https://use.fontawesome.com/f1e10fbba5.js"></script>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="https://specie-admin-template.multipurposethemes.com/images/favicon.ico">

    <title>Specie Bootstrap 5 Admin Template</title>
    
    <!-- Vendors Style-->
    <link rel="stylesheet" href="css/vendors_css.css">
      
    <!-- Style-->  
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/skin_color.css">
     
  </head>
  <body>
  <div id="myModal1" >
        <div >
             <div >
                  <div >
                        <h5 >Subscribe our Newsletter</h5>
                        <button type="button"  data-dismiss="modal">X</button>
                  </div>
                  <div >
                  <p>Subscribe to our mailing list to get the latest updates straight in your inbox.</p>
                        <form>
                             <div >
                                  <input type="text"  placeholder="Name">
                             </div>
                             <div >
                                  <input type="email"  placeholder="Email Address">
                             </div>
                             <button type="submit" >Subscribe</button>
                        </form>
                  </div>
             </div>
        </div>
  </div>
  </body>
  </html>

The issue is that on page load modal popup. When I click on the close button it is not working. It is not closing the modal but when I click outside the modal it closes. I simply want the modal to close when I click on the cross button. You can use the thing anything you want.

CodePudding user response：

I tried running your code. It's running perfectly. So probably delete your cache and browser history and reload everything. This might just be a problem of your local browser.