【发布时间】：2019-01-09 17:48:21
【问题描述】：
寻求一些帮助以使我的模态正常工作。当我单击按钮时，什么也没有发生。我想我已经加载了引导文件和 jquery 的所有内容。谁能帮忙指出我错过了什么？不知道除了我已经拥有的之外，我是否应该做一些轻量级的 JS/Jquery。
为了简化，我删除了除按钮和模式代码之外的所有内容。
提前致谢！
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>LED Light Signs</title>
<link rel="stylesheet" href="assets/css/fontawesome/css/fontawesome.css">
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/custom.css">
<link href="https://fonts.googleapis.com/css?family=Homenaje" rel="stylesheet">
<!--[if lt IE9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<section id="interestForm">
<div class="container">
<div class="row">
<div class="col-sm-8">
<p class="lead"><strong>Interested in your own LED light SIGN?</strong> Hit the button to get the process started!</p>
</div><!-- col -->
<div class="col-sm-4">
<button class="btn btn-success btn-lg btn-block" date-toggle="modal" data-target="#interestModal">Click here to contact us</button>
</div><!-- col -->
</div><!-- row -->
</div><!-- container -->
</section>
<div class="modal fade" id="interestModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel"><i class="fa fa-envelope"></i>Send Us a Message!</h4>
</div><!-- modal-header -->
<div class="modal-body">
<p>Please answer the following questions! We will get to you as soon as possible with design information on your new sign!</p>
<form class="form-inline" role="form">
<div class="form-group">
<label for="mail-name" class="sr-only">Your first name</label>
<input type="text" class="form-control" id="mail-name" placeholder="Your first name">
</div><!-- form-group -->
<div class="form-group">
<label for="mail-email" class="sr-only">Your email</label>
<input type="text" class="form-control" id="mail-email" placeholder="Your email">
</div><!-- form-group -->
<input type="submit" class="btn btn-danger" value="Send!">
</form>
</div><!-- modal-body -->
</div><!-- modal-content -->
</div><!-- modal-dialog -->
</div><!-- modal -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="assets/js/jquery-3.3.1.min.js"></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="assets/js/bootstrap.min.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
【问题讨论】：
-
您希望在单击按钮时弹出表单？
标签： jquery html bootstrap-4 bootstrap-modal