【发布时间】：2020-05-28 19:07:42
【问题描述】：
我尝试制作一个登录按钮，该按钮打开一个登录详细信息的模式。当我单击按钮时，它会指向我想要的那个点。但是什么都没有打开。一个类似的问题是另一个按钮必须打开另一个模式。
关于导航栏切换操作的第二个问题不起作用。当我点击切换按钮时，按钮没有响应。
下面是我的代码 - ：
导航栏按钮代码 -
<!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-md fixed-top">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon "></span>
</button>
<a class="navbar-brand" href="#"><img src="img/logo.png" height="30" width="41"></a>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#"><span class="fa fa-home fa-lg"></span>
Home</a></li>
<li class="nav-item"><a class="nav-link" href="./aboutus.html"><span
class="fa fa-info fa-lg"></span> About</a></li>
<li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-list fa-lg"></span> Menu</a>
</li>
<li class="nav-item"><a class="nav-link" href="contactus.html"><span
class="fa fa-address-card fa-lg"></span> Contact</a></li>
</ul>
<span class="navbar-text">
<a data-toggle="modal" href="#loginModal">
<span class="fa fa-sign-in"></span> Login
</a>
</span>
</div>
</div>
</nav>
-------------------------------------------------
-------------------------------------------------
CODE FOR LOGIN MODAL -
<div id="loginModal" class="modal fade" role="dialog">
<div class="modal-dialog-centered 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="exampleInputEmail3">Email address</label>
<input type="email" class="form-control form-control-sm mr-1" id="exampleInputEmail3"
placeholder="Enter email">
</div>
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control form-control-sm mr-1"
id="exampleInputPassword3" placeholder="Password">
</div>
<div class="col-sm-auto">
<div class="form-check">
<input class="form-check-input" type="checkbox">
<label class="form-check-label"> Remember me
</label>
</div>
</div>
</div>
<div class="form-row">
<button type="button" class="btn btn-secondary btn-sm ml-auto"
data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary btn-sm ml-1">Sign in</button>
</div>
</form>
</div>
</div>
</div>enter code here
</div>
</body>
' <!-- 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).on('.data-api')</script>
<script>'
【问题讨论】：
标签： html jquery bootstrap-modal navbar