Question

我尝试使用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>

Answer 1

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

您还要在包含脚本之前关闭head标记。这是错误的

你应该检查的两件事：

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

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

接下来，我相信你错过了一些标签，以便模式工作，如：

（你错过了带模态对话和模态内容的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 -->

使用引导程序创建模态窗体（HTML）

1 个答案: