Question

我试图使用Bootstrap在表单中创建一个简单的弹出日志。我正在学习本教程： https://www.youtube.com/watch?v=HCEbp07hfLw
所以我试着用这段代码做他正在做的事情：

<!DOCTYPE html>
<html>
<head>
    <title>kaki</title>
<link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
<script        src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">    </script>
<script type="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">        </script>
</head>
<body>

<div class="modal" id="myModal" aria-hidden="true">

<div class="modal-header">
    <h3>Poop and Kaki Login</h3>
</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">Log In</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>

当我运行代码时，什么都没显示..没什么。有什么帮助吗？

Answer 1

Bootstrap模态不会自动打开。您应该使用documentation中提到的不显眼的JS来触发模态窗口：

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

Answer 2

以下是bootstrap中工作模式的示例：http://jsfiddle.net/chapmanc/d518cdwt/1/ 启动演示模式

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </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>
  </div>
</div>

一个问题是你使用的是bootstrap版本，它需要jQuery的最低版本1.9.1，你要包括1.7.1。

另一个问题是默认情况下会隐藏模态，而您实际上从未启动模态。如果你查看我从文档中提取的链接的示例，你会看到一个按钮来启动模态。

我的建议是始终阅读您正在研究的文档（有些文档比其他文档更好但是bootstrap非常好）。您还应该熟悉浏览器调试工具，特别是控制台。我更喜欢Chrome，https://developer.chrome.com/devtools。

Bootsrap对话框不会显示

2 个答案: