Question

我是一个全新的bootstrap新手，只是通过一些教程。我在问题上所做的所有搜索似乎都来自几年前（以及旧版本的引导带。无论如何，基本上我有一些示例代码，我似乎无法显示我的模态。非常感谢任何帮助。提前致谢！

<!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>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="navbar navbar-inverse">
        <div class="container">
            <div class="navbar-header"> <a href="" class="navbar-brand">Macho's Nachos</a> 
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span</button>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="">Page 1</a>
                    </li>
                    <li><a href="">Page 2</a>
                    </li>
                    <li><a href="">Page 3</a>
                    </li>
                    <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown! <span class="glyphicon glyphicon-knight"></span></a>

                        <ul class="dropdown-menu">
                            <li><a href="#">Links</a>
                            </li>
                            <li><a href="#">Contact Us</a>
                            </li>
                            <li><a href="#">Locations</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container">
        <form class="form-inline">
            <div class="form-group">
                <label for="email">Email</label>
                <input name="email" type="email" placeholder="Your Email" class="form-control" />
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input name="password" type="password" placeholder="Password" class="form-control" />
            </div>
            <div class="form-group">
                <input type="submit" value="Sign In" class="btn btn-success" />
            </div>
        </form>
    </div>
    <div class="container">
        <button class="btn btn-success" data-toggle="modal" data-target="myModal">Register</button>
        <div class="modal" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal">X</button>
                         <h4 class="modal-title">My Modal!</h4>

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

Answer 1

对于定义为

的按钮

<button class="btn btn-success" data-toggle="modal" data-target="#myModal">Register</button>

使用data-target="myModal"符号

将data-target="#myModal"更改为#

引导程序中的模态未显示

1 个答案: