【问题标题】：Cannot open my modal window in html file无法在 html 文件中打开我的模式窗口
【发布时间】：2017-07-26 09:40:34
【问题描述】：
尝试通过引导教程使用 class= "model" 创建一个模态窗口。我所做的一切都与教程中的完全一样，安装了引导程序，但我的代码不起作用。有什么想法有什么问题吗？我没有使用任何 js 或其他插件，我相信我不应该。
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<button type="button" class="btn btn-success" data-toggle="modal" data-target="modal-1">
Open modal window
</button>
<div class="modal" id="modal-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Registration</h4>
<button class="close" type="button" data-dismiss="modal">
<i class="fa fa-close"></i>
</button>
</div>
<div class="modal-body">
<p>Something</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" data-dismiss="modal">Закрыть окно</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
【问题讨论】：
标签：
html
css
twitter-bootstrap
modal-window
【解决方案1】：
试试这段代码，你刚刚错过了数据目标的#符号
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#modal-1">
Open modal window
</button>
<div class="modal" id="modal-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Registration</h4>
<button class="close" type="button" data-dismiss="modal">
<i class="fa fa-close"></i>
</button>
</div>
<div class="modal-body">
<p>Something</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" data-dismiss="modal">Закрыть окно</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
【解决方案2】：
在data-target中模态的id前添加#
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#modal-1">
Open modal window
</button>
<div class="modal" id="modal-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Registration</h4>
<button class="close" type="button" data-dismiss="modal">
<i class="fa fa-close"></i>
</button>
</div>
<div class="modal-body">
<p>Something</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" data-dismiss="modal">Закрыть окно</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
【解决方案3】：
在按钮 add data-target="#modal-1"。它会工作
打开模态窗口