Question

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

<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整件事的代码。

谢谢大家：）

EDIT。这是头部：

  <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/

Answer 1

您还应该在标题中加载这些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>

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

我修复了你需要添加bootsrap.js脚本文件的fiddle，你也可以删除这段代码：

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

Answer 2

工作代码

<!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>

其他变化：数据解雇=＆＃34;模态＆＃34;应用于关闭按钮

模态根本没有加载

2 个答案: