Question

我还在学习自助训练，但这看起来非常直接，我无法让它发挥作用。我有一个提交按钮（暂时）我想显示一个模态。提交按钮就像我将其改为一样，它显示了加载时的一些模态内容。我在这里搜索了答案，检查了CSS＆amp; JS我打电话但是相信它很好

                <!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>Non functional mock up</title>


                    <!-- Bootstrap -->
                <link href="css/bootstrap-theme.css" rel="stylesheet">

                <!-- Bootstrap -->
                <link href="css/bootstrap.min.css" rel="stylesheet">

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

                <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
                <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
                <!--[if lt IE 9]>
                  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
                  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
                <![endif]-->


                <style>

                    .navbar-brand{
                        font-size:1.9em;
                        }

                    #topContainer {
                        background-image:url("background.jpg");
                        height:800px;
                        width:100%;
                        background-size:cover;
                            }


                    #topRow{
                        margin-top:100px;
                        text-align:center;
                        }

                    #topRow h1{
                        font-size:300%;

                            }

                    .bold {
                        font-weight:bold;
                        }

                    .marginTop{
                        margin-top:30px;
                        }           

                    .center {
                        text-align:center;
                        }

                    #footer {
                        background-color:#6D92E0;
                        width:100%;

                    }

                    .appStoreimage {
                        width:250px;

                    }

                </style>
              </head>
              <body>

                <div class="navbar navbar-default navbar-fixed">

                    <div class="container">

                        <div class="navbar-header">
                            <a href="" class="navbar-brand"> TakenPlace</a>

                            <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>              


                        </div>

                        <div class="collapse navbar-collapse">
                            <ul class="nav navbar-nav">
                                <li class="active"><a href="#home">Home</a>
                                <li><a href="#moreInfo">More Info</a>
                                <li><a href="#policies">Contact Us</a>
                            </ul>

                            <form class="navbar-form navbar-right">
                                <div class="form-group">
                                    <input type="email" placeholder="Email" class="form-control">
                                    <input type="password" placeholder="Password" class="form-control">
                                    <button type="submit" class="btn btn-success">Log In</button>
                                    <button type="submit" class="btn btn-primary">Register</button>


                                </div>
                            </form>

                        </div>

                    </div>

                </div>

                <div class="container contentContainer" id="topContainer">

                    <div class="row">

                        <div class="col-md-6 col-md-offset-3" id="topRow">

                            <h1 class="marginTop" >Title </h1>

                            <p class="lead"> Some lead text</p>

                            <p> a little bit more blurb </p>

                            <p class="bold marginTop">User prompt to search </p>

                            <form class="marginTop">
                                <div class="input-group">
                                    <span class="input-group-addon glyphicon glyphicon-search"></span>

                                    <input type="text" class="form-control" placeholder="Search Location" />

                                </div>  
                                    <input type="submit" class="btn btn-success btn-lg marginTop" value="Search" data-toggle="modal" data-target="#myModal" />                  

                            </form>


            <div class="modal fade" id="myModal" >
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">Modal title</h4>
                  </div>
                  <div class="modal-body">
                    <p>One fine body&hellip;</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><!-- /.modal-content -->
              </div><!-- /.modal-dialog -->
            </div><!-- /.modal -->




                <script> 

                    $(".contentContainer").css("min-height",$(window).height());

                </script>
              </body>
            </html>

Answer 1

我认为你的模态窗口会显示出来。问题是，<button type="submit">还会尝试将<form>提交给服务器，这只会刷新您的网页。

通过向按钮添加onclick="return false;"来禁用尝试提交表单的按钮。此JavaScript函数始终返回false，这使按钮取消提交。

更好的方法可能是从<button type="submit">更改为<button type="button">而没有默认行为

Bootstrap Modal不会出现

1 个答案: