A modal window should open when you click on Support, but it does not open. Maybe someone knows what to do?

body { height: 2000px; } .p-0 { padding: 0; } #bd { font-size: 18px; } 
 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Учу bootstrap</title> <link rel="stylesheet" type="text/css" href="123.css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a href="#" class="navbar-brand"> <img src="img/english.png" width="80" height="40" alt="logo" title="Home"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportContent" aria-controls="navbarSupportContent" aria-expend="false" aria-label="ToggleNavigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a href="#" class="nav-link" id="bd">Present</a> </li> <li class="nav-item active"> <a href="#" class="nav-link" id="bd">Past</a> </li> <li class="nav-item active"> <a href="#" class="nav-link" id="bd">Can, will</a> </li> <li class="nav-item active"> <a href="#" class="nav-link" id="bd" data-toggle="modal" data-target="exampleModal">Support</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input type="text" class="form-control mr-sm-2" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0">Search</button> </form> </div> </nav> <div class="container-fluid p-0"> <div id="carouselHome" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li class="active" data-target="carouselHome" data-slide-to="0"></li> <li class="active" data-target="carouselHome" data-slide-to="2"></li> <li class="active" data-target="carouselHome" data-slide-to="3"></li> <li class="active" data-target="carouselHome" data-slide-to="4"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img src="img/city1.jpg" alt="" class="d-block w-100"> </div> <div class="carousel-item"> <img src="img/city2.jpg" alt="" class="d-block w-100"> </div> <div class="carousel-item"> <img src="img/city3.jpg" alt="" class="d-block w-100"> </div> <div class="carousel-item"> <img src="img/city4.jpg" alt="" class="d-block w-100"> </div> </div> <a href="#carouselHome" class="carousel-control-prev" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a href="#carouselHome" class="carousel-control-next" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> <div class="container-fluid"> <div class="cntainer"> <div class="row text-center"> <div class="col"> <a href="#"><img src="img/1.png" alt="" class="w-25"></a> </div> <div class="col"> <a href="#"><img src="img/2.png" alt="" class="w-25"></a> </div> <div class="col"> <a href="#"><img src="img/3.png" alt="" class="w-25"></a> </div> </div> </div> </div> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModal" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button class="close" type="button" data-dismiss="modal" aria-label="close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <p>Hello world</p> </div> </div> </div> </div> </body>

    1 answer 1

    You need to access the modal window by #id:

     <a href="#" class="nav-link" id="bd" data-toggle="modal" data-target="#exampleModal">Support</a>
    • thanks, great - Nikita Lebedev