Question

我遇到了模式的问题，它在加载时打开，并且不响应点击以关闭它。不确定问题是什么。附上的是我的代码。当我单击按钮时如何打开模态并在单击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>
                &times;
                </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>

Answer 1

<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">&times;</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>

参考：getbootstrap.com/javascript/#modals

Modal会打开但不会关闭？

1 个答案: