无法在 html 文件中打开我的模态 window
Cannot open my modal window in html file
尝试通过 bootstrap 教程使用 class = "model" 制作模态 window。我完全按照教程中的方式进行了所有操作,安装了 bootstrap,但我的代码不起作用。任何想法有什么问题吗?我没有使用任何 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>
在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>
试试你刚刚错过的这个代码 # 数据目标的符号
<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>
在按钮中 add data-target="#modal-1"
。它会起作用
打开模式window
尝试通过 bootstrap 教程使用 class = "model" 制作模态 window。我完全按照教程中的方式进行了所有操作,安装了 bootstrap,但我的代码不起作用。任何想法有什么问题吗?我没有使用任何 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>
在data-target
#
<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>
试试你刚刚错过的这个代码 # 数据目标的符号
<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>
在按钮中 add data-target="#modal-1"
。它会起作用
打开模式window