0

私が使用している現在のバージョンの Bootstrap (私の間違いでなければ v2.3.2) の Modal はすぐに表示され、私のせいかもしれませんが、ゆっくりと消えます。最初は問題なく動作しましたが、ジャンボトロン div に検索バーとフォームを挿入した後、爆発しました。コードを元に戻そうとしましたが、問題は解決しません。キャッシュとすべてを空にしました。提案？

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;
}
4

0 に答える 0