Bootstrap 表单标签中的模态

Question

我是 bootstrap 的新手，我只是尝试用 bootstrap 构建表单。当我点击 ESC 按钮时它会显示并消失，但它完全处于非活动状态（我无法点击关闭或保存更改按钮）。

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Заголовок</title>        <link href="bootstrap-3.3.4/dist/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <header>
         <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                        aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>                
                </button>
                <a class="navbar-brand" href="#">Project name</a>
                </div>
                <div id="navbar" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="index2.htm">About</a></li>
                        <li><a href="index3.htm">Contact</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role ="button"
                               aria-expanded="false">Dropdown<span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li class="dropdown-header">Nav header</li>
                                <li><a href="#">Separated link</a></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </li>
                    </ul>  
                    <form class="navbar-form navbar-right">
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#mySignIn">Sign in</button>
                        <span class="text-warning">or</span>
                        <!--<button type="button" class="btn btn-success" data-toggle="modal" data-target="#mySignUp">Sign up</button>-->

                        <div class="modal fade" id="mySignIn" tabindex="-1" role="dialog"
                             aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <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">
                                        <p>dvcdfji uewhfiu ehfie wk.j fberhb efuih eiuh iuerhuei
                                        fknvdkjb gerbe iurf uei fiuer . erb fb ueyfg iu? rkjhfviuerhf uiehr,jb dfhb
                                        fvndfb dfiv n!!!</p>
                                    </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>

                    </form>
            </div>
        </div>



    </nav>

        </header>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap-3.3.4/dist/js/bootstrap.min.js"></script>
  </body>
</html>

Answer 1

这里是代码更新

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">

    <title>Заголовок</title>
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <header>
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button class="navbar-toggle collapsed" data-target=
                    "#navbar" data-toggle="collapse" type="button"><span class=
                    "sr-only">Toggle navigation</span> <span class=
                    "icon-bar"></span> <span class="icon-bar"></span>
                    <span class="icon-bar"></span></button> <a class=
                    "navbar-brand" href="#">Project name</a>
                </div>

                <div class="collapse navbar-collapse" id="navbar">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="#">Home</a>
                        </li>

                        <li>
                            <a href="index2.htm">About</a>
                        </li>

                        <li>
                            <a href="index3.htm">Contact</a>
                        </li>

                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown"
                            href="#">Dropdown<span class="caret"></span></a>

                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#">Action</a>
                                </li>

                                <li>
                                    <a href="#">Another action</a>
                                </li>

                                <li>
                                    <a href="#">Something else here</a>
                                </li>

                                <li class="divider"></li>

                                <li class="dropdown-header">Nav header</li>

                                <li>
                                    <a href="#">Separated link</a>
                                </li>

                                <li>
                                    <a href="#">One more separated link</a>
                                </li>
                            </ul>
                        </li>
                    </ul>

                    <form class="navbar-form navbar-right">
                        <button class="btn btn-primary" data-target="#mySignIn"
                        data-toggle="modal" type="button">Sign in</button>
                        <span class="text-warning">or</span>
                        <!--<button type="button" class="btn btn-success" data-toggle="modal" data-target="#mySignUp">Sign up</button>-->
                    </form>
                </div>
            </div>
        </nav>
    </header>

    <div class="modal fade" id="mySignIn" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" type=
                    "button"><span>&times;</span></button>

                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>

                <div class="modal-body">
                    <p>dvcdfji uewhfiu ehfie wk.j fberhb efuih eiuh iuerhuei
                    fknvdkjb gerbe iurf uei fiuer . erb fb ueyfg iu?
                    rkjhfviuerhf uiehr,jb dfhb fvndfb dfiv n!!!</p>
                </div>

                <div class="modal-footer">
                    <button class="btn btn-default" data-dismiss="modal" type=
                    "button">Close</button> <button class="btn btn-primary"
                    type="button">Save changes</button>
                </div>
            </div>
        </div>
    </div><!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>

根据文档 http://getbootstrap.com/javascript/#modals

Modal markup placement
Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.

所以我刚刚将 div class="modal" 移到了顶层。希望这有帮助。

Bootstrap 表单标签中的模态

Bootstrap modal in form tag

twitter-bootstrap

bootstrap-modal