使用引导程序 (HTML) 创建模态表单答案

【问题标题】：Create Modal Form with bootstrap (HTML)使用引导程序 (HTML) 创建模态表单
【发布时间】：2014-01-12 11:54:25
【问题描述】：

我尝试通过本教程使用 Boostrap 创建一个模态表单： http://www.youtube.com/watch?v=HCEbp07hfLw 我在视频中做同样的事情。但是当我在浏览器中打开这个页面时，我什么也得不到。我将 boostrap 文件夹添加到 'WebContent' 文件夹，并为它们添加链接。这是我的代码，有什么问题？

      <!DOCTYPE html>
<html>
<head>
<script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>

<link rel="stylesheet" href="css/bootstrap.min.css">

<meta charset="windows-1255">
</head>
<title>Insert title here</title>

<body>

    <div class="modal" id="myModal" aria-hidden="true">
        <div class="modal-header">
            <h3>פתיחת קריאה</h3>
            <div class="modal-body">
            <form>
            <label>Email</label>
            <input type="email" class="span4"/><br>
            <label>Password</label>
            <input type="text" class="span4"/><br><br>
            <button type="submit" class="btn btn-success">Login</button>
            <button type="reset" class="btn">Clear</button>
            </form>

            </div>

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

    </div>
</body>
</html>

【问题讨论】：

您应该在 Bootstrap 之前加载 jQuery。控制台中的任何错误？也尝试验证您的 HTML，head 不正确，为什么要在那里关闭它？
好的，谢谢..我改变了它，但它没有帮助..我在页面中只看到标题：'在此处插入标题'和白页

标签： javascript html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您应该在引导程序之上插入 jquery，并且您只能使用引导程序 js 之一。您加载了 2 个版本，它们可以创建 conflit。

您也在包含脚本之前关闭了 head 标签。这是错误的

你应该检查的两件事：

在关闭body标签之前先添加以下内容：

<script>
    $('document').ready(function() {$('#myModal').modal('show');});
</script>

接下来，我相信您缺少一些让模态工作的标签，例如：

（您缺少带有 modal-dialog 和 modal-content 的 div）

<div class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</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 -->

【讨论】：

现在这是命令，但它仍然没有显示表单：
我更新了我的帖子。在插入 acripts 和链接之前，您正在隐藏头部
感谢我也更新了我的帖子，我改变了你所说的，但没有任何改变。
查看源代码（ctrl + u）并点击jquery和bootstrap，看看它们是否正确打开。如果不是，它们就不是你所说的那样。请检查
我已经更新了我的回复。我相信它可以解决您的问题。