繁体   English   中英

模态会打开但不会关闭吗?

[英]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>
                &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>

 <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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM