0

The Modal in the current edition of Bootstrap I'm using (v2.3.2 if I'm not mistaken) quickly appears and, kinda- maybe it's me, slowly disappears. At first it worked ok, but after inserting a search bar and form in a jumbotron div, it just blew up. I tried reverting my code, but the problem still persists. Emptied the cache and everything, and still. Suggestions?

HTML:

        <!DOCTYPE html>
    <html lang="eg">
        <head>
            <title>Vanilla</title>
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <!-- Bootstrap -->
                <link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
                <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" media="screen">
                <link href="stylesheet.css" rel="stylesheet" type="text/css" media="screen">
        </head>
        <body style="padding: 40px">
            <script src="bootstrap/js/jquery.js"></script>
            <script src="bootstrap/js/bootstrap.min.js"></script>

            <!--Navigation Bar-->
            <div class="navbar navbar-inverse navbar-fixed-top pull-right">
                <div class="navbar-inner">
                    <a class="brand pull-right" href="index.php">Vanilla</a>
                    <ul class="nav pull-right">
                        <li><a class="pull-right" href="#signUpModal" data-toggle="modal">Need an account? Sign Up here</a></li>
                        <li><form class="navbar-form pull-right" action="login.php" method="POST">
                                <input type="text" class="span2" name="uname" placeholder="Username">
                                <input id="password-password" type="password" class="span2" name="upass" placeholder="Password">
                                <button type="submit" class="btn">Log In</button>
                            </form>
                        </li>
                    </ul>
                </div>
            </div>
            <!--END Nav Bar-->

            <!--Sign-Up Modal-->
            <div id="signUpModal"class="modal hide fade" tabindex="-1"  role="dialog" aria-labelledby="signUpModalLabel" aria-hidden="true">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
                        <h3 id="myModalLabel" align= "center">Sign Up</h3>
                </div>
                <div class="modal-body center">
                    <form class="form-signup" align= "center" method="post" action="signup.php">
                        <input type="text" class="span3" name="uname" placeholder="Username"><br>
                        <input type="text" class="span3" name="email" placeholder="Email"><br>
                        <input type="password" class="span3" name="pass" placeholder="Password"><br>
                        <button class="btn btn-primary" type="submit">Sign Up</button>
                    </form>
                </div>
            </div>
            <!--END Sign-Up Modal-->

            <!--Jumbotron-->
            <div class="container-narrow">
                <div class="jumbotron">
                    <div>
                        <h1>Vanilla</h1><br>
                        <div class='input-append'>
                            <form align="center" method="get" action="search.php">
                                <input type="text" name="query" placeholder="Search" />
                                <button type="submit" class='btn add-on'>
                                    <i class="icon-search"></i>
                                </button>
                            </form>
                            </div>
                    </div>
            </div>
            <!--END Jumbotron-->
        </body>
    </html>

CSS:

#signUpModal{
width: 350px;
left: 55%;
}
.container-narrow div.jumbotron{
    text-align:center;
    position:absolute;
width:95%;
top:30%;
}
.input-append button.add-on {
height: inherit !important;
}
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
cintron
  • 513
  • 5
  • 19
  • i don't see a problem (http://bootply.com/63558) May be add the javascript to the bottom: http://stackoverflow.com/questions/2451417/whats-pros-and-cons-putting-javascript-in-head-and-putting-just-before-the-body. – Bass Jobsen Jun 08 '13 at 10:24
  • It's probably your browser struggling with the fading. Try an empty modal on an empty page and compare. Or try disabling the fade. If it's still slow, come back with a working example of what you are experiencing. – Sherbrow Jun 08 '13 at 11:02
  • Yeah. After a while, it kinda evened out, but every now-and-then it gets laggy. Thanks for the input! – cintron Jun 08 '13 at 17:01

0 Answers0