CODEWITHSUNDEEP
twitter-bootstrapbootstrap-modal
Brad
Brad

Reputation: 51

Bootstrap Modal doesn't appear

I'm still learning bootstrap but this seems incredibly straight forward and I just cant get it working. I have a submit button that (for the time being) i want to display a modal. The submit button is an as when i chenge it to a it shows some of the modal content on loading. I've scoured the answers here, checked the CSS & JS i'm calling but believe its all fine

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

Upvotes: 0

Views: 3421

Answers (1)

ckuijjer
ckuijjer

Reputation: 13814

I think your modal window is shown. The problem is that the <button type="submit"> will also try submit the <form> to the server which will simply refresh your page.

Disable the button trying to submit the form by adding onclick="return false;" to the button. This JavaScript function always returns false which makes the button cancel the submit.

A better way might be to change from <button type="submit"> to <button type="button"> which doesn't have default behaviour

Upvotes: 3

Related Questions