Question

我正在使用Bootstrap v3.1.1并复制了模态框测试的确切documentation。我正在尝试正确显示Bootstrap的模态框，但出于某种原因，它会在我测试它的某些时候工作。我点击了一个按钮，该按钮假设触发模态框，显示灰色淡入淡出/阴影（模态框打开时的背景）并快速消失。我调试并看到很多错误，声明宣布下降。

我注意到的另一件事是，网址C://.../test.html没有使模式框正确显示，但添加C://.../test.html#会使框功能正常。现在，这让我很奇怪，因为我的整个html文档中有几个主题标签，它与这些主题标签有什么关系吗？也许，特别是这行代码？

<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">

如果没有，问题的根本原因是为什么url字符串末尾的＃标签使其工作，我该如何解决？

HTML：

<!DOCTYPE HTML>
<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login Test</title>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->

<style>
 /*{border:1px dotted blue;}*/
 footer{margin-top:20px;}
</style>
</head>
<body>

<!-- Skip Navigation -->
<a href="#PrintReady" class="offscreen" style="display:none;">Skip to Main Content Area</a>  
<div id="container">
<div class="container">

    <div class="bannerLogoArea" style="padding:20px 0;">
    <span class="bannerSiteAreaText">Login Test</span>
    </div> 

    <!-- PlaceBar -->
    <div class="nav-cntr">
        <!-- Static navbar -->
        <div class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    </button>
                </div>

                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a class="wpsUnSelectedPlaceLink" href='#'>&nbsp;Home&nbsp;</a></li>
                        <li><a class="wpsUnSelectedPlaceLink" href='#'>&nbsp;Account&nbsp;</a></li> 
                        <li><a class="wpsUnSelectedPlaceLink" href='#'>&nbsp;Contact Us&nbsp;</a></li>      
                        <li class="active"><a class="wpsSelectedPlaceLink" href='#'>&nbsp;Login Test&nbsp;</a></li> 
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#"><strong>Login or Register</strong></a></li>
                    </ul>
                </div><!--/.nav-collapse -->
            </div><!--/.container-fluid -->
        </div> 
    </div><!--/.nav-cntr -->       

    <div id="PrintReady"> 

        <table border="0" width="100%" cellpadding="0" cellspacing="0" align="center">
            <tr height="100%"> 
                <td valign="top" > 
                    <table border="0" width="100%" cellpadding="0" cellspacing="0" align="center"> 
                        <tr>
                            <td width="100%" valign="top">

                                <div class="default-skin">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <h1>Member Registration</h1>
                                            <p>Please complete the following fields and click 'Continue.'</p>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-10">
                                            <form class="form-horizontal" role="form">

                                                <!--Button trigger modal-->
                                                <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                                                    Read & Accept Lorem Ipsum
                                                </button>

                                            </form>
                                            <!--Modal-->
                                                <div class="modal fade" id="myModal" 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-hidden="true">&times;</button>
                                                                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                                                            </div>
                                                            <div class="modal-body">
                                                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. 
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                        </div>
                                    </div>
                                </div>  

                            </td>
                        </tr> 
                    </table>
                </td>
            </tr> 
        </table>         

    </div><!-- /PrintReady -->

</div> <!-- /container -->  
</div>
</body>
</html>

Answer 1

哦，我明白了。将模式移到表单之外！

将此<div class="modal fade" id="myModal" ....>移到<form class="form-horizontal" role="form">

之外

在它下面。虽然bootstrap.js很难用它，但div的内部形式是完全可以接受的。这是一个已知的错误！

Answer 2

删除触发模态的按钮周围的表单元素。您的按钮正在触发表单操作，这就是它突然改变的原因。这里的工作示例：http://www.bootply.com/zYGnsEkuF2

<!-- <form class="form-horizontal" role="form"> REMOVE THIS LINE -->
  <!--Button trigger modal-->
  <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Read & Accept Lorem Ipsum
  </button>
<!-- </form> REMOVE THIS LINE -->

如何正确显示Bootstrap的模态框？

2 个答案: