CODEWITHSUNDEEP
javascriptjqueryhtmlcssbootstrap-4
Mitch
Mitch

Reputation: 704

Bootstrap Modal Not Allowing Links?

I am using Bootstrap 4. For my navigation, when you click the MENU button a modal drops down. I am trying to create links on the modal but for some reason no links are able to become activated. Is there something I'm missing for the bootstrap modal attributes to trigger links? Any help would be grateful.

a {
  color: inherit;
  text-decoration: inherit;
}

a:hover {
  color: inherit;
  text-decoration: inherit;
}

body {
  font-family: 'Roboto Condensed', sans-serif;
}

/* ---------------------------------------------------- */


  /* navigation */

.navbar-toggler:focus, .navbar-toggler:active {
    outline: none;
    border: none;
    box-shadow: none;
  }

.menu {
    padding-left: 10px;
  }

.fa-bars, .menu {
  color: #006699 !important;
}

.navbar-text {
  color: gray;
}

.mainlink {
  font-size: 1.75em;
  line-height: 1.25em;
  font-weight: 400;
}

.sublink {
  font-size: 1em;
  line-height: 1.15em;
}

.navbar-toggle {
  margin-left: 15px;
  margin-right: 0;
}

.modal-nav-content {
  /* width: 100%; */
  height: auto;
}

.modal-nav-body {
  margin-top: 10em;
}

.modal-nav-body p {
  color: white;
  margin: 0;
  padding: 0;
  padding-top: 6px;
  padding-bottom: 6px;
  /* width: 100%; */
}

.modal-nav-body h5 {
  color: white;
  line-height: 1.5em;
  font-size: 2.75em;
  font-weight: 700;
  /* padding-left: 2em; */
  padding-bottom: 1.5em;
}

.navbar-toggler::before {
  border: none;
  background: transparent !important;
}

.navbar-text {
  display: inline-block;
  word-spacing: 2em;
}

.navbar-text a {
  color: #808080;
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">

    <title>Crossings Realty</title>
  </head>

  <body>
    <nav class="navbar bg-light">
      <div class="container">
        <a class="navbar-brand" href="#">
           <img src="content/crossings-nav.png" alt="Crossings Realty">
        </a>
        <!-- <span class="navbar-text mr-auto pl-5">
          <a href="#">Listings</a>
          <a href="#">About</a>
          <a href="#">Contact</a>
        </span> -->
        <span class="navbar-text ml-auto pr-2">
          <i class="fas fa-phone fa-xs pr-2"></i><a class="pl-1">000-000-0000</a>
          <a class="menu">MENU</a>
        </span>
        <button class="navbar-toggler collapsed" type="button" data-toggle="modal" data-target="#nav-modal" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <i class="fas fa-bars fa-lg"></i>
        </button>
      </div>
    </nav>
    <div class="modal fade" id="nav-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-nav-content">
          <div class="modal-nav-body">
              <div class="row">
                <h5>Explore Crossings Realty.</h5>
              </div>
                <div class="row">
                  <div class="col-sm">
                    <p class="mainlink"><a href="#">HOME</a></p>
                    <p class="mainlink pt-4"><a href="#">SELLING</a></p>
                    <p class="mainlink pt-4"><a href="#">LISTINGS</a></p>
                      <p class="sublink"><a href="#">Buy</a></p>
                      <p class="sublink"><a href="#">Rent</a></p>
                      <p class="mainlink pt-4"><a href="#">CONTACT</a></p>
                  </div>
                  <div class="col-sm">
                    <p class="mainlink"><a href="#">ABOUT</a></p>
                      <p class="sublink"><a href="#">Full Experience</a></p>
                      <p class="sublink"><a href="#">We Know Real Estate</a></p>
                      <p class="sublink"><a href="#">Great Agents</a></p>
                    <p class="mainlink pt-4"><a href="#">RESOURCES</a></p>
                      <p class="sublink"><a href="#">How we sell fast</a></p>
                      <p class="sublink"><a href="#">FAQs on buying and selling</a></p>
                      <p class="sublink"><a href="#">Why use a Realtor?</a></p>
                      <p class="sublink"><a href="#">We are part of MLS</a></p>
                      <p class="sublink"><a href="#">Mortgage Calculator</a></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>




    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

Upvotes: 2

Views: 1052

Answers (4)

Kishan
Kishan

Reputation: 11

There are some issue in your HTML structure. You are not following bootstrap modal structure. Hope this helps you!

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

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">

  <style type="text/css">
    a {
      color: inherit;
      text-decoration: inherit;
    }
    
    a:hover {
      color: inherit;
      text-decoration: inherit;
    }
    
    body {
      font-family: 'Roboto Condensed', sans-serif;
    }
    /* ---------------------------------------------------- */
    /* navigation */
    
    .navbar-toggler:focus,
    .navbar-toggler:active {
      outline: none;
      border: none;
      box-shadow: none;
    }
    
    .menu {
      padding-left: 10px;
    }
    
    .fa-bars,
    .menu {
      color: #006699 !important;
    }
    
    .navbar-text {
      color: gray;
    }
    
    .mainlink {
      font-size: 1.75em;
      line-height: 1.25em;
      font-weight: 400;
    }
    
    .sublink {
      font-size: 1em;
      line-height: 1.15em;
    }
    
    .navbar-toggle {
      margin-left: 15px;
      margin-right: 0;
    }
    
    .modal-nav-content {
      /* width: 100%; */
      height: auto;
    }
    
    .modal-nav-body {
      margin-top: 10em;
    }
    
    .modal-nav-body p {
      color: white;
      margin: 0;
      padding: 0;
      padding-top: 6px;
      padding-bottom: 6px;
      /* width: 100%; */
    }
    
    .modal-nav-body h5 {
      color: white;
      line-height: 1.5em;
      font-size: 2.75em;
      font-weight: 700;
      /* padding-left: 2em; */
      padding-bottom: 1.5em;
    }
    
    .navbar-toggler::before {
      border: none;
      background: transparent !important;
    }
    
    .navbar-text {
      display: inline-block;
      word-spacing: 2em;
    }
    
    .navbar-text a {
      color: #808080;
    }
    
    .modal-nav .modal-content {
      border: none;
      background: none;
      border-radius: 0;
    }
  </style>

  <title>Crossings Realty</title>
</head>

<body>
  <nav class="navbar bg-light">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img src="content/crossings-nav.png" alt="Crossings Realty">
      </a>
      <!-- <span class="navbar-text mr-auto pl-5">
              <a href="#">Listings</a>
              <a href="#">About</a>
              <a href="#">Contact</a>
            </span> -->
      <span class="navbar-text ml-auto pr-2">
              <i class="fas fa-phone fa-xs pr-2"></i><a class="pl-1">000-000-0000</a>
              <a class="menu">MENU</a>
            </span>
      <button class="navbar-toggler collapsed" type="button" data-toggle="modal" data-target="#nav-modal" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
              <i class="fas fa-bars fa-lg"></i>
            </button>
    </div>
  </nav>


  <div class="modal fade modal-nav" id="nav-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">

        <div class="modal-body">
          <div class="modal-nav-body">
            <div class="row">
              <h5>Explore Crossings Realty.</h5>
            </div>
            <div class="row">
              <div class="col-sm">
                <p class="mainlink"><a href="#">HOME</a></p>
                <p class="mainlink pt-4"><a href="#">SELLING</a></p>
                <p class="mainlink pt-4"><a href="#">LISTINGS</a></p>
                <p class="sublink"><a href="#">Buy</a></p>
                <p class="sublink"><a href="#">Rent</a></p>
                <p class="mainlink pt-4"><a href="#">CONTACT</a></p>
              </div>
              <div class="col-sm">
                <p class="mainlink"><a href="#">ABOUT</a></p>
                <p class="sublink"><a href="#">Full Experience</a></p>
                <p class="sublink"><a href="#">We Know Real Estate</a></p>
                <p class="sublink"><a href="#">Great Agents</a></p>
                <p class="mainlink pt-4"><a href="#">RESOURCES</a></p>
                <p class="sublink"><a href="#">How we sell fast</a></p>
                <p class="sublink"><a href="#">FAQs on buying and selling</a></p>
                <p class="sublink"><a href="#">Why use a Realtor?</a></p>
                <p class="sublink"><a href="#">We are part of MLS</a></p>
                <p class="sublink"><a href="#">Mortgage Calculator</a></p>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>




  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>

</html>

Upvotes: 1

Deepak Verma
Deepak Verma

Reputation: 617

You just need to change:

  1. model-nav-content with model-content
  2. model-nav-body with model-body

as model-nav-body and other is not the default class in bootstrap. it is a custom class which you have applied and thus creating error.

a {
  color: inherit;
  text-decoration: inherit;
}

a:hover {
  color: inherit;
  text-decoration: inherit;
}

body {
  font-family: 'Roboto Condensed', sans-serif;
}

/* ---------------------------------------------------- */


  /* navigation */

.navbar-toggler:focus, .navbar-toggler:active {
    outline: none;
    border: none;
    box-shadow: none;
  }

.menu {
    padding-left: 10px;
  }

.fa-bars, .menu {
  color: #006699 !important;
}

.navbar-text {
  color: gray;
}

.mainlink {
  font-size: 1.75em;
  line-height: 1.25em;
  font-weight: 400;
}

.sublink {
  font-size: 1em;
  line-height: 1.15em;
}

.navbar-toggle {
  margin-left: 15px;
  margin-right: 0;
}

.modal-nav-content {
  /* width: 100%; */
  height: auto;
}

.modal-nav-body {
  margin-top: 10em;
}

.modal-nav-body p {
  color: white;
  margin: 0;
  padding: 0;
  padding-top: 6px;
  padding-bottom: 6px;
  /* width: 100%; */
}

.modal-nav-body h5 {
  color: white;
  line-height: 1.5em;
  font-size: 2.75em;
  font-weight: 700;
  /* padding-left: 2em; */
  padding-bottom: 1.5em;
}

.navbar-toggler::before {
  border: none;
  background: transparent !important;
}

.navbar-text {
  display: inline-block;
  word-spacing: 2em;
}

.navbar-text a {
  color: #808080;
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">

    <title>Crossings Realty</title>
  </head>

  <body>
    <nav class="navbar bg-light">
      <div class="container">
        <a class="navbar-brand" href="#">
           <img src="content/crossings-nav.png" alt="Crossings Realty">
        </a>
        <!-- <span class="navbar-text mr-auto pl-5">
          <a href="#">Listings</a>
          <a href="#">About</a>
          <a href="#">Contact</a>
        </span> -->
        <span class="navbar-text ml-auto pr-2">
          <i class="fas fa-phone fa-xs pr-2"></i><a class="pl-1">000-000-0000</a>
          <a class="menu">MENU</a>
        </span>
        <button class="navbar-toggler collapsed" type="button" data-toggle="modal" data-target="#nav-modal" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <i class="fas fa-bars fa-lg"></i>
        </button>
      </div>
    </nav>
    <div class="modal fade" id="nav-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-body">
              <div class="row">
                <h5>Explore Crossings Realty.</h5>
              </div>
                <div class="row">
                  <div class="col-sm">
                    <p class="mainlink"><a href="#">HOME</a></p>
                    <p class="mainlink pt-4"><a href="#">SELLING</a></p>
                    <p class="mainlink pt-4"><a href="#">LISTINGS</a></p>
                      <p class="sublink"><a href="#">Buy</a></p>
                      <p class="sublink"><a href="#">Rent</a></p>
                      <p class="mainlink pt-4"><a href="#">CONTACT</a></p>
                  </div>
                  <div class="col-sm">
                    <p class="mainlink"><a href="#">ABOUT</a></p>
                      <p class="sublink"><a href="#">Full Experience</a></p>
                      <p class="sublink"><a href="#">We Know Real Estate</a></p>
                      <p class="sublink"><a href="#">Great Agents</a></p>
                    <p class="mainlink pt-4"><a href="#">RESOURCES</a></p>
                      <p class="sublink"><a href="#">How we sell fast</a></p>
                      <p class="sublink"><a href="#">FAQs on buying and selling</a></p>
                      <p class="sublink"><a href="#">Why use a Realtor?</a></p>
                      <p class="sublink"><a href="#">We are part of MLS</a></p>
                      <p class="sublink"><a href="#">Mortgage Calculator</a></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>




    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

Upvotes: 0

hawkstrider
hawkstrider

Reputation: 4341

You are missing required class names for a bootstrap modal. You have a couple custom ones for the content and body, but modal-content and modal-body are required for the modal to work properly. I added them in below and links are working properly, but you will need to adjust your custom styles as some of you content is now not visible with the default modal styles.

a {
  color: inherit;
  text-decoration: inherit;
}

a:hover {
  color: inherit;
  text-decoration: inherit;
}

body {
  font-family: 'Roboto Condensed', sans-serif;
}

/* ---------------------------------------------------- */


  /* navigation */

.navbar-toggler:focus, .navbar-toggler:active {
    outline: none;
    border: none;
    box-shadow: none;
  }

.menu {
    padding-left: 10px;
  }

.fa-bars, .menu {
  color: #006699 !important;
}

.navbar-text {
  color: gray;
}

.mainlink {
  font-size: 1.75em;
  line-height: 1.25em;
  font-weight: 400;
}

.sublink {
  font-size: 1em;
  line-height: 1.15em;
}

.navbar-toggle {
  margin-left: 15px;
  margin-right: 0;
}

.modal-nav-content {
  /* width: 100%; */
  height: auto;
}

.modal-nav-body {
  margin-top: 10em;
}

.modal-nav-body p {
  color: white;
  margin: 0;
  padding: 0;
  padding-top: 6px;
  padding-bottom: 6px;
  /* width: 100%; */
}

.modal-nav-body h5 {
  color: white;
  line-height: 1.5em;
  font-size: 2.75em;
  font-weight: 700;
  /* padding-left: 2em; */
  padding-bottom: 1.5em;
}

.navbar-toggler::before {
  border: none;
  background: transparent !important;
}

.navbar-text {
  display: inline-block;
  word-spacing: 2em;
}

.navbar-text a {
  color: #808080;
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">

    <title>Crossings Realty</title>
  </head>

  <body>
    <nav class="navbar bg-light">
      <div class="container">
        <a class="navbar-brand" href="#">
           <img src="content/crossings-nav.png" alt="Crossings Realty">
        </a>
        <!-- <span class="navbar-text mr-auto pl-5">
          <a href="#">Listings</a>
          <a href="#">About</a>
          <a href="#">Contact</a>
        </span> -->
        <span class="navbar-text ml-auto pr-2">
          <i class="fas fa-phone fa-xs pr-2"></i><a class="pl-1">000-000-0000</a>
          <a class="menu">MENU</a>
        </span>
        <button class="navbar-toggler collapsed" type="button" data-toggle="modal" data-target="#nav-modal" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <i class="fas fa-bars fa-lg"></i>
        </button>
      </div>
    </nav>
    <div class="modal fade" id="nav-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content modal-nav-content">
          <div class="modal-body modal-nav-body">
              <div class="row">
                <h5>Explore Crossings Realty.</h5>
              </div>
                <div class="row">
                  <div class="col-sm">
                    <p class="mainlink"><a href="#">HOME</a></p>
                    <p class="mainlink pt-4"><a href="#">SELLING</a></p>
                    <p class="mainlink pt-4"><a href="#">LISTINGS</a></p>
                      <p class="sublink"><a href="#">Buy</a></p>
                      <p class="sublink"><a href="#">Rent</a></p>
                      <p class="mainlink pt-4"><a href="#">CONTACT</a></p>
                  </div>
                  <div class="col-sm">
                    <p class="mainlink"><a href="#">ABOUT</a></p>
                      <p class="sublink"><a href="#">Full Experience</a></p>
                      <p class="sublink"><a href="#">We Know Real Estate</a></p>
                      <p class="sublink"><a href="#">Great Agents</a></p>
                    <p class="mainlink pt-4"><a href="#">RESOURCES</a></p>
                      <p class="sublink"><a href="#">How we sell fast</a></p>
                      <p class="sublink"><a href="#">FAQs on buying and selling</a></p>
                      <p class="sublink"><a href="#">Why use a Realtor?</a></p>
                      <p class="sublink"><a href="#">We are part of MLS</a></p>
                      <p class="sublink"><a href="#">Mortgage Calculator</a></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>




    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

Upvotes: 0

Rick Jelier
Rick Jelier

Reputation: 373

Bootstrap 4 modal has the "pointer-events" attribute set to none by default. To work around this add the following to your style.css file:

.modal-dialog {
    pointer-events: all;
}

Then the links will work

Upvotes: 4

Related Questions