Bootstrap 4 Modal将无法打开点击
问题描述:
我无法让我的模式打开。我尝试了Bootstrap 4网站上找到的纯HTML,然后使用了一些Javascript。我真的无法弄清楚我做错了什么。任何帮助将非常感谢!Bootstrap 4 Modal将无法打开点击
enter code here
<
<div class="col-sm-3 col-centered boxes" id="box1">
<button type="button" class="btn btn-primary" id="box1modal" data-toggle="modal" data-target="#exampleModal">
See More
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Wedding Invites</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img src="Wedding%20Invites.jpg">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
`enter code here`<script type="text/javascript">
enter code here
$( “#box1modal”)点击(函数(事件){enter code here
$( '#myModal')模态( '秀'); enter code here
)};
答
如果您正在使用引导不需要额外scripting.bootstrap本身提供的脚本运行不同的动画和行动的。我检查你的代码。 错误在于行
<button type="button" class="btn btn-primary" id="box1modal" data-toggle="modal" data-target="#exampleModal">
看到您已将数据目标设置为#exampleModal,而您的模式的ID为“myModal”。只需将上面的代码更改为
<button type="button" class="btn btn-primary" id="box1modal" data-toggle="modal" data-target="#myModal">
而且在没有任何其他脚本的情况下它将正常工作。 希望这有助于...
答
我测试你的代码,每一个细微的东西只是你必须确保
1)添加引用 2)你的代码必须是在$(文件)。就绪(函数(){} ----
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-sm-3 col-centered boxes" id="box1">
<button type="button" class="btn btn-primary" id="box1modal" data-toggle="modal" data-target="#exampleModal">
See More
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Wedding Invites</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img src="Wedding%20Invites.jpg">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</body>
</hmtl>
<script>
$(document).ready(function(){
$('#box1modal').click(function(){
alert("btn click")
$('#myModal').modal('show')
});
});
</script>
答
您已将数据目标作为examplemodal和div的id作为mymodal。两者应该是一样的,这就是问题所在。
非常感谢。这工作!我不敢相信我花了那么多时间去想出来! – cerawebdesign