Bootstrap 3 Modal 不适用于主题答案

【问题标题】：Bootstrap 3 Modal isn't working with the themeBootstrap 3 Modal 不适用于主题
【发布时间】：2015-02-07 16:44:37
【问题描述】：

我目前正在使用这个主题http://www.bootply.com/render/85779# 创建一个移动网站。我正在尝试实现一个模式，但它似乎不适用于这个主题。我在我的 CSS 和 JS 文件中实现了正确的代码，可能有什么问题？

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <title>Storystrap Template</title>
        <meta name="generator" content="Bootply" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
        <!--[if lt IE 9]>
            <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <div class="container">
          <div class="row">
            <div class="col-md-12"> 
              <div class="panel">
                <div class="panel-body">
                  <!--/stories-->
                  <div class="row">    
                    <br>
                    <div class="col-md-2 col-sm-3 text-center">
                      <a class="story-title" href="#"><img alt="" src="http://api.randomuser.me/portraits/thumb/men/58.jpg" style="width:100px;height:100px" class="img-circle"></a>
                    </div>
                    <div class="col-md-10 col-sm-9">
                      <h3>In n Out</h3>
                      <div class="row">
                        <div class="col-xs-9">
                          <h4><span class="label label-default">4 spots left</span></h4><h4>
                          <small style="font-family:courier,'new courier';" class="text-muted">Leaves at 1PM  • <a href="#" class="text-muted">Returns at 2PM</a></small>
                          </h4>
                        </div>
                        <div class="col-xs-3">
                          <button type ="button" class="btn btn-primary pull-right btnNext" data-toggle="modal" data-target="#moreModal">More <i class="glyphicon glyphicon-chevron-right"></i></button>
                          <!-- <ul>
                            <li></li>
                          </ul> -->
                        </div>
                      </div>
                      <br><br>
                    </div>
                  </div>
                  <hr>
                  <!--/stories-->   
                </div>
              </div>                                                
            </div><!--/col-12-->
          </div>
          <div class="modal" id="moreModal" tabindex="-1" role="dialog" aria-labelledby="moreModal" aria-hidden="true">
            <div class="modal-dialog">
             <div class="modal-header">
               <p>did it work</p>
              </div>
            </div>
          </div>
        </div>

【问题讨论】：

您缺少<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">，请确认botstrap.min.js 和jquery.min.js 已正确链接
您是否正在加载引导模式脚本？浏览器的错误日志里有什么吗？

标签： jquery html css twitter-bootstrap

【解决方案1】：

您缺少 jquery 和 modal.js。你不需要整个 bootstrap.min.js 库，只需要从官网全部下载，找到 modal.js 文件，在 jquery 之后添加到你的站点即可。

【讨论】：