模态根本不加载答案

【问题标题】：Modal not loading at all模态根本不加载
【发布时间】：2016-07-09 09:24:47
【问题描述】：

所以我试图在单击页脚中的一个单词时打开一个模式，但绝对没有发生任何事情。这是模态代码：

<div class="col-lg-5 footerLeft"><a href="#aboutit" data-toggle="modal" data-target="#aboutit">about</a></div>
<div class="modal fade" id="aboutit">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Caesar's Cipher</h3>
            </div>
            <div class="modal-body">
                <p>Explanation.</p>
            </div>
            <div class="modal-footer">
                <a href="#" class="btn" data-dismiss="modal">Learn More</a>
                <a href="#" class="btn btn-primary">Close</a>
            </div>
            </div>
        </div>
    </div>
</div>

我希望当您单击左下角的“关于”一词时打开模式。 Here is 整个事情的密码笔。

谢谢大家:)

编辑。这是头部：

  <head>
    <meta charset=utf-8/>

    <!-- bootstrap files -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
    <link rel="stylesheet" type="text/css" href="cipher.css">


    <title>CIPHER</title>
</head>

编辑 2：jsfiddle 链接：https://jsfiddle.net/fxrLymrq/

【问题讨论】：

你加载到页面引导模型js文件了吗？
它工作得很好，Demo 可能你错过了一个 js 或 css 文件。
奇怪，我不知道是什么。谢谢你的提琴，至少我知道我做对了
@l-emi 它认为你错过了找到你的脚本之类的东西。如果您可以上传您的头部部分，也许我们可以找到您的问题。
@ShlomiHaver 已编辑以包含头部部分

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

工作代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>
<div class="col-lg-5 footerLeft"><a href="#aboutit" data-toggle="modal" data-target="#aboutit">about</a></div>
<div class="modal fade" id="aboutit">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Caesar's Cipher</h3>
            </div>
            <div class="modal-body">
                <p>Explanation.</p>
            </div>
            <div class="modal-footer">
                <a href="#" class="btn" >Learn More</a>
                <a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>
            </div>
        </div>
    </div>
</div>
</body>
</html>

其他变化：data-dismiss="modal" 应用于关闭按钮

【讨论】：

嘿，它有效！谢谢 :) 唯一的问题是它破坏了我的样式和布局：/
我发现当我从 html 中删除我的 css 表时，模式可以正常工作，但它看起来很乱（显然如果没有样式）。但是，如果我将其重新添加，则模式不起作用。为什么会这样？
修复它，现在模态弹出很好。但是它不像以前那样对齐，我希望这两个链接位于页面底部。
让我们continue this discussion in chat。

【解决方案2】：

您还应该在标题中加载这些 js 文件：

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

这应该运行你的模态代码。

我修复了你的fiddle 你必须添加 bootsrap.js 的脚本文件，你也可以摆脱这段代码：

$('#aboutit').ready(function() {
  $('#aboutit').modal('show');
});

【讨论】：

@l-emi 您可以上传与您的问题相关的整个代码的小提琴吗？它会更容易帮助你。
好的，请稍等