我刚刚将Bootstrap 4.1
重新链接到Bootstrap 5
,我的模态停止工作。我的意思是,当我的模态打开时,它会变灰,我无法单击按钮或退出它。我应该如何更改它才能在Bootstrap 5
中工作?
这是我的代码:
模态:
<!-- Creates the bootstrap modal where the image will appear -->
<div class="modal fade" id="imagemodal" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Zamknij</span></button>
<h4 class="modal-title" id="myModalLabel">Podgląd</h4>
</div>
<div class="modal-body">
<!-- <img src="" id="imagepreview" style="width: 400px; height: 264px;" > -->
<img src="" id="imagepreview" style="width: 400px; height: 264px;" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JS:
$("#pop").on("click", function() {
$('#imagepreview').attr('src', $('#imageresource').attr('src')); // here asign the image to the modal when the user click the enlarge link
$('#imagemodal').modal('show'); // imagemodal is the id attribute assigned to the bootstrap modal, then i use the show function
});
将data-属性更改为data-bs-,如引导程序5中迁移更改列表中的Javascript部分所述(https://getbootstrap.com/docs/5.0/migration/)。