Вот мой индекс. html страница, созданная с использованием Bootstrap 4. Здесь в 'Резервная таблица с использованием модального окна' должен запускаться только модальный, который предназначен для резервирования таблицы. Но вся страница после jumbotron перешла внутрь модальный. Пользовательская функция jquery или javascript не добавлена, кроме одного скрипта для всплывающей подсказки. Как исправить?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css">
<link rel="stylesheet" href="css/styles.css">
<title>Ristorante Con Fusion</title>
</head>
<body>
<nav class="navbar navbar-dark navbar-expand-sm fixed-top">
<div class="container">
<button class="navbar-toggler" data-toggle="collapse" type="button" data-target="#Navbar">
<span class="navbar-toggler-icon"> </span>
</button>
<a href="#" class="navbar-brand mr-auto">
<img src="img/logo.png" height="30" width="41" alt="logo.png">
</a>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a href="./index.html" class="nav-link">
<span class="fa fa-home fa-lg"></span> Home </a> </li>
<li class="nav-item"><a href="./aboutus.html" class="nav-link">
<span class="fa fa-info fa-lg"></span> About </a></li>
<li class="nav-item"><a href="#" class="nav-link">
<span class="fa fa-list fa-lg"></span> Menu </a></li>
<li class="nav-item"><a href="./contactus.html" class="nav-link">
<span class="fa fa-address-card fa-lg"></span> Contact </a></li>
</ul>
<span class="navbar-text">
<a data-toggle="modal" data-target="#loginModal" >
<span class="fa fa-sign-in"> </span> Login
</a>
</span>
</div>
</div>
</nav>
<div class="modal fade" id="loginModal" role="dialog">
<div class="modal-dialog modal-lg" role="content">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
Login
</h4>
<button type="button" class="close" data-dismiss="modal" >
×
</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputEmail" >
Email Address
</label>
<input type="email" class="form-control form-control-sm mr-1" id="exampleInputEmail" placeholder="Enter Email">
</div>
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputPassword" >
Password
</label>
<input type="password" class="form-control form-control-sm mr-1" id="exampleInputPassword" placeholder="Enter Email">
</div>
<div class="col-sm-auto">
<div class="form-check">
<input type="checkbox" name="" id="rememberMe" class="form-check-input">
<label for="rememberMe" class="form-check-label">Remember Me</label>
</div>
</div>
</div>
<div class="form-row">
<button type="button" class="btn btn-primary btn-sm ml-auto">
Sign In
</button>
<button type="button" class="btn btn-secondary btn-sm ml-1" data-dismiss="modal">
Cancel
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<header class="jumbotron">
<div class="container">
<div class="row row-header">
<div class="col-12 col-sm-6">
<h1>Ristorante con Fusion</h1>
<p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!</p>
</div>
<div class="col-12 col-sm-3 align-self-center" >
<img src="img/logo.png" class="img-fluid" alt="logo.png">
</div>
<div class="col-12 col-sm-3 align-self-center" >
<a class="btn btn-warning col-12 mb-2" href="#card" data-toggle="tooltip"
data-html="true"data-placement="bottom"
title="Or try to call us at <br><strong> +852 123456789</strong>" >
Reserve Table Using Internal Hyper Link
</a>
<a class="btn btn-warning col-12" href="" data-toggle="modal" data-target="#reserveTableModal">
Reserve Table Using Modal
</a>
</div>
</div>
</div>
</div>
</header>
<div class="modal fade" id="reserveTableModal" role="dialog">
<div class="modal-dialog modal-lg" role="content">
<div class="modal-content">
<div class="modal-header bg-warning">
<h3 class="modal-title text-white">Reserve a Table</h3>
<button type="button" class="close" data-dismiss="modal" >
×
</button>
</div>
<div class="modal-body">
<form action="">
<div class="form-group row">
<h5 class="col-md-2">
<span class="label label-default">Number of Guests</span>
</h5>
<div class="form-check col-md-6 ">
<label for="1" class="col-form-label">
<input type="radio" name="TotalGuest" id="1"> 1
</label>
<input type="radio" name="TotalGuest" id="2">
<label for="2" class="col-form-label"> 2</label>
<input type="radio" name="TotalGuest" id="3">
<label for="3" class="col-form-label"> 3</label>
<input type="radio" name="TotalGuest" id="4">
<label for="4" class="col-form-label"> 4</label>
<input type="radio" name="TotalGuest" id="5">
<label for="5" class="col-form-label"> 5</label>
<input type="radio" name="TotalGuest" id="6">
<label for="6" class="col-form-label"> 6</label>
</div>
</div>
<div class="form-group row">
<div class="input-group">
<h5 class="col-md-2">
Section
</h5>
<div class="col-md-6 ">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-success custom-btn" for="noSmoke">
<input type="radio" name="smokeZone" id="noSmoke" autocomplete="off" checked="checked" > Non-Smoking
</label>
<label class="btn btn-danger custom-btn" for="Smoke">
<input type="radio" name="smokeZone" id="Smoke" autocomplete="off"> Smoking
</label>
</div>
</div>
</div>
</div>
<div class="form-group row">
<h5 class="col-md-2">
Date and Time
</h5>
<div class="col-md-10">
<div class="col-md-5 form-check-inline">
<input class="form-control" type="text" name="" id="" placeholder="Date">
</div>
<div class="col-md-5 form-check-inline">
<input class="form-control " type="text" name="" id="" placeholder="Time">
</div>
</div>
</div>
<div class="form-group row">
<div class="offset-md-2 col-md-10">
<button type="button" class="btn btn-secondary ml-1" data-dismiss="modal">
Cancel
</button>
<button type="submit" class="btn btn-primary">
Reserve
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row row-content">
<div class="col">
<div class="carousel slide" id="myCarousel" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="img/uthappizza.png" alt="uthappizza">
<div class="carousel-caption d-none d-sm-block">
<h2 >
Uthappizza
<span class="badge badge-danger">HOT</span>
<span class="badge badge-pill badge-secondary">$4.99</span>
</h2>
<p class="d-none d-sm-block">
A unique combination of Indian Uthappam (pancake)
and Italian pizza, topped .</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="img/buffet.png" alt="buffet">
<div class="carousel-caption d-none d-sm-block">
<h2 class="mt-0">
Weekend Grand Buffet
<span class="badge badge-danger">NEW</span>
</h2>
<p class="d-none d-sm-block">
Featuring mouthwatering combinations with a
choice of five different salads. </p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="img/alberto.png" alt="alberto">
<div class="carousel-caption d-none d-sm-block">
<h2>Alberto Somayya</h2>
<h4>Executive Chef</h4>
<p class="d-none d-sm-block">Award winning three-star Michelin .
</p>
</div>
</div>
</div>
<ol class="carousel-indicators">
<li class="active" data-target="#myCarousel" data-slide-to="0"></li>
<li class="" data-target="#myCarousel" data-slide-to="1"></li>
<li class="" data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"> </span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon"> </span>
</a>
<div class="btn-group" id="carouselButtons">
<button class="btn btn-danger btn-sm" id="carousel-pause">
<span class="fa fa-pause"></span>
</button>
</div>
</div>
</div>
</div>
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 order-sm-last col-md-3">
<h3>Our Lipsmacking Culinary Creations</h3>
</div>
<div class="col col-sm order-sm-first col-md">
<div class="media">
<img src="img/uthappizza.png" alt="uthappizza.png" class="d-flex mr-3 img-thumbnail-align-self-center">
<div class="media-body">
<h2 class="mt-0">
Uthappizza
<span class="badge badge-danger">HOT</span>
<span class="badge badge-pill badge-secondary">$4.99</span>
</h2>
<p class="d-none d-sm-block">
A unique combination of Indian Uthappam.</p>
</div>
</div>
</div>
</div>
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 col-md-3">
<h3>This Month's Promotions</h3>
</div>
<div class="col col-sm col-md">
<h2 class="mt-0">
Weekend Grand Buffet
<span class="badge badge-danger">NEW</span>
</h2>
<p class="d-none d-sm-block">
Featuring mouthwatering combinations with a
choice of five different salads. </p>
</div>
<div class="media">
<img src="img/buffet.png" alt="buffet.png" class="d-flex ml-3 img-thumbnail align-self-center">
</div>
</div>
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 order-sm-last col-md-3">
<h3>Meet our Culinary Specialists</h3>
</div>
<div class="media">
<img src="img/alberto.png" alt="alberto.png" class="d-flex ml-3 img-thumbnail align-self-center">
</div>
<div class="media-body">
<div class="col col-sm order-sm-first col-md">
<h2>Alberto Somayya</h2>
<h4>Executive Chef</h4>
<p class="d-none d-sm-block">Award winning three-star Michelin
chef
</p>
</div>
</div>
</div>
<div class="row row-content" id="card">
<div class="col-sm-8 col-12 offset-sm-2">
<div class="card">
<h3 class="card-header bg-warning text-white">Reserve a Table</h3>
<div class="card-body">
<form action="">
<div class="form-group row">
<h5 class="col-md-2">
<span class="label label-default">Number of Guests</span>
</h5>
<div class="form-check col-md-6 ">
<label for="1" class="col-form-label">
<input type="radio" name="TotalGuest" id="1"> 1
</label>
<input type="radio" name="TotalGuest" id="2">
<label for="2" class="col-form-label"> 2</label>
<input type="radio" name="TotalGuest" id="3">
<label for="3" class="col-form-label"> 3</label>
<input type="radio" name="TotalGuest" id="4">
<label for="4" class="col-form-label"> 4</label>
<input type="radio" name="TotalGuest" id="5">
<label for="5" class="col-form-label"> 5</label>
<input type="radio" name="TotalGuest" id="6">
<label for="6" class="col-form-label"> 6</label>
</div>
</div>
<div class="form-group row">
<h5 class="col-md-2">
Date and Time
</h5>
<div class="col-md-10">
<div class="col-md-5 form-check-inline">
<input class="form-control" type="text" name="" id="" placeholder="Date">
</div>
<div class="col-md-5 form-check-inline">
<input class="form-control " type="text" name="" id="" placeholder="Time">
</div>
</div>
</div>
<div class="form-group row">
<div class="offset-md-2 col-md-10">
<button type="submit" class="btn btn-primary">Reserve </button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-4 offset-1 col-sm-2">
<h5>Links</h5>
<ul class="list-unstyled">
<li><a href="./index.html">Home</a></li>
<li><a href="./aboutus.html">About</a></li>
<li><a href="#">Menu</a></li>
<li><a href="./contactus.html">Contact</a></li>
</ul>
</div>
<div class="col-7 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
<i class="fa fa-phone fa-lg"></i> +852 1234 5678<br>
<i class="fa fa-fax fa-lg"></i> +852 8765 4321<br>
<i class="fa fa-envelope fa-lg"></i> <a href="mailto:confusion@food.net">confusion@food.net</a>
</address>
</div>
<div class="col-12 col-sm-4 align-self-center">
<div class="text-align">
<a class="btn btn-social-icon btn-google" href="http://google.com/+">
<i class="fa fa-google-plus fa-lg"></i>
</a>
<a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id=">
<i class="fa fa-facebook fa-lg"></i>
</a>
<a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/">
<i class="fa fa-linkedin fa-lg"></i>
</a>
<a class="btn btn-social-icon btn-twitter" href="http://twitter.com/">
<i class="fa fa-twitter fa-lg"></i>
</a>
<a class="btn btn-social-icon btn-youtube"href="http://youtube.com/">
<i class="fa fa-youtube fa-lg"></i>
</a>
<a class="btn btn-social-icon btn-envelope" href="mailto:">
<i class="fa fa-envelope-o fa-lg"></i>
</a>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-auto">
<p>© Copyright 2018 Ristorante Con Fusion</p>
</div>
</div>
</div>
</footer>
<!-- jQuery first, then Popper.js, then Bootstrap JS. -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
})
</script>
</body>
</html>