[英]Modal does opens but does not close?
我在模态中遇到问题,它在加载时打开,并且不响应将其关闭的点击。 不知道问题是什么。 随附的是我的代码。 单击按钮时如何打开模态,单击x时如何关闭模态
<html lang="en">
<head>
<meta chart="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewort" content="width=device-width, intial-scal=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/bootstrap.min.js"></script>
<title>Bootstrap</title>
</head>
<body>
<!-- signup button -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#signupform">
Signup
</button>
<!-- log in button
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#loginform">Login</button> -->
<!-- popup signup form-->
<div class="modal-fade" id="signupform">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span>
×
</span>
</button>
<h4 class="modal-title"> Sign Up</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label class="col-md-4 col-md-offset-1">
First Name:
</label>
<div class="col-md-5">
<input type="text" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">
Last Name:
</label>
<div class="col-md-5">
<input type="text" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">
Email:
</label>
<div class="col-md-5">
<input type="email" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">
Password:
</label>
<div class="col-md-5">
<input type="password" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">
Confirm Password:
</label>
<div class="col-md-5">
<input type="password" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-8">
<input type="submit" class="btn btn-success" value="submit">
</div>
</div>
</form>
</div>
<div class="modal-footer"></div>
</div>
</div>
</div>
<script src="js/jquery-2.2.0.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script> <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.