Question

我完全按照YouTube教程（关于模态），但我的浏览器中没有任何内容。是因为我的脚本/链接？请帮忙。

这是我的代码。

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Modal example</title>

        <link href="bootstrap-3.2.0-dist/css/bootstrap.css" rel="stylesheet" />
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="js/bootstrap.js"></script>
    </head>
    <body>
        <div class="modal" id="myModal" aria-hidden="true">
            <div class="modal-header">
                <h1>hi</h1>
            </div>

            <div class="modal-body">
                <form>
                    <label>Email</label>
                    <input type="email" class="span4" /> <br />
                    <label>Password</label>
                    <input type="password" class="span4" /> <br /><br />
                    <button type="submit" class="btn btn-success">Login</button>

                </form>

            </div>

            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>
        </div>

    </body>
    </html>

Answer 1

您的HTML是正确的，但是您需要一种在页面上显示模态的方法，因为模态本身具有aria-hidden =“true”。您可以通过使用jQuery调用.modal（“show”）/。modal（“hide”）或使用其数据目标设置为模式的id值的链接在JavaScript中执行此操作。

我已经包含了您可以用来打开HTML的链接作为示例。在示例中插入正文标签正下方的链接。

<a href="#" data-toggle="modal" data-target="#myModal">Open Modal</a>

data-toggle =“modal”＆amp; data-target =“＃myModal”告诉bootstrap您希望此链接切换ID为“myModal”的模式。

编辑：另外，Bootstrap的JavaScript需要jQuery。我建议更改脚本标记并将标记链接到以下内容以使用推荐的CDN for Bootstrap＆amp; jQuery简化您的设置。如果您不使用CDN，则需要下载文件并将其包含在您的部分中。

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<link rel="stylesheet" ref="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Answer 2

首先你应该去这个网站＆＃34; http://getbootstrap.com/＆＃34; 然后单击屏幕中心的下载按钮。然后解压缩zip文件并将其复制到项目文件中。 *重要点* 根据您的HTML代码复制此代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title></title>
    <link rel='stylesheet' type='text/css' href='css/bootstrap.min.css' >
<body>

</body>
    <script src='js/bootstrap.min.js' type='text/javascript'></script>
</html>

无法调用bootstrap模式

2 个答案: