admin管理员组文章数量:1323707
All my modal forms are working fine. But here's one I ported from Bootstrap 4 to Bootstrap 5 and it won't close. The Close button (the X at the top of the popup) won't close the modal. And the Cancel button won't close the modal.
I updated data-dismiss to data-bs-dismiss. I don't know what else I'm missing. There are no JavaScript errors.
$('#open-modal').on('click', function() {
var $modal = $('#date-filter-modal');
$modal.show();
});<link href="/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<button id="open-modal" type="button" class="btn btn-primary">Open Modal</button>
<div id="date-filter-modal" class="modal" tabindex="-1" role="dialog">
<form method="get">
<input type="hidden" name="ftype" />
<input type="hidden" name="fid" />
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Start Date</label>
<input class="form-control start-date" type="date" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">End Date</label>
<input class="form-control end-date" type="date" />
</div>
</div>
</div>
</div>
<div class="modal-footer d-flex justify-content-between">
<div>
<button type="button" class="clear-date-filter btn btn-danger">Clear</button>
</div>
<div>
<button type="submit" class="btn btn-success">Set Filter</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</form>
</div>
<script src=".3.1/jquery.min.js"></script>
<script src="/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>All my modal forms are working fine. But here's one I ported from Bootstrap 4 to Bootstrap 5 and it won't close. The Close button (the X at the top of the popup) won't close the modal. And the Cancel button won't close the modal.
I updated data-dismiss to data-bs-dismiss. I don't know what else I'm missing. There are no JavaScript errors.
$('#open-modal').on('click', function() {
var $modal = $('#date-filter-modal');
$modal.show();
});<link href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<button id="open-modal" type="button" class="btn btn-primary">Open Modal</button>
<div id="date-filter-modal" class="modal" tabindex="-1" role="dialog">
<form method="get">
<input type="hidden" name="ftype" />
<input type="hidden" name="fid" />
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Start Date</label>
<input class="form-control start-date" type="date" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">End Date</label>
<input class="form-control end-date" type="date" />
</div>
</div>
</div>
</div>
<div class="modal-footer d-flex justify-content-between">
<div>
<button type="button" class="clear-date-filter btn btn-danger">Clear</button>
</div>
<div>
<button type="submit" class="btn btn-success">Set Filter</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</form>
</div>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>Can anyone suggest what I might have missed?
Share Improve this question edited Aug 5, 2022 at 16:15 isherwood 61.1k16 gold badges121 silver badges169 bronze badges asked Aug 5, 2022 at 14:40 Jonathan WoodJonathan Wood 67.4k82 gold badges303 silver badges529 bronze badges 3- It's easy enough to put your code in a snippet with Bootstrap from a CDN. Let's see it! – isherwood Commented Aug 5, 2022 at 14:53
-
$('#date-filter-modal').show()is a jquery method an simply removesdisplay:none, whilst bootstrap.Modal API implements more, either use the API or add in .hide() event or dont use either and usedata-bs-toggle="modal" data-bs-target="#date-filter-modal"on the button – Lawrence Cherone Commented Aug 5, 2022 at 15:07 - @LawrenceCherone: Yes, that's the issue. – Jonathan Wood Commented Aug 5, 2022 at 15:10
6 Answers
Reset to default 3It looks like you did not initialize the modal. Remove display: block from the modal and "show" it properly like so:
let modal = new bootstrap.Modal('#date-filter-modal')
modal.show()<link href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<div id="date-filter-modal" class="modal" tabindex="-1" role="dialog">
<form method="get">
<input type="hidden" name="ftype" value="ShipDate">
<input type="hidden" name="fid">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Ship Date Filter</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Start Date</label>
<input class="form-control start-date" type="date">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">End Date</label>
<input class="form-control end-date" type="date">
</div>
</div>
</div>
</div>
<div class="modal-footer d-flex justify-content-between">
<div>
<button type="button" class="clear-date-filter btn btn-danger">Clear</button>
</div>
<div>
<button type="submit" class="btn btn-success">Set Filter</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</form>
</div>Bootstrap v4.3.1:
<button type="button" id="btnCloseCategories" class="btn btn-danger" data-dismiss="modal">Close</button>
Bootstrap v5.1.0:
<button type="button" id="btnCloseCategories" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
Old: data-dismiss="modal"
New: data-bs-dismiss="modal"
Looks like I found the issue.
Under Bootstrap 4, I would display the modal like this:
$modal.modal();
This does nothing under Bootstrap 5, so I changed it to this:
$modal.show();
That works, but I guess it is no longer using the Bootstrap modal logic. It's simply making the form visible. Either way, it prevents the normal dismiss logic from working.
The correct syntax is:
$modal.modal('show');
You can try adding a function for .btn-close.
let modal = new bootstrap.Modal('#date-filter-modal')
modal.hide()
$('#open-modal').on('click', function() {
var $modal = $('#date-filter-modal');
modal.show();
});
$('.btn-close').on('click', function() {
var $modal = $('#date-filter-modal');
modal.hide();
});<link href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<button id="open-modal" type="button" class="btn btn-primary">Open Modal</button>
<div id="date-filter-modal" class="modal" tabindex="-1" role="dialog">
<form method="get">
<input type="hidden" name="ftype" />
<input type="hidden" name="fid" />
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Start Date</label>
<input class="form-control start-date" type="date" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">End Date</label>
<input class="form-control end-date" type="date" />
</div>
</div>
</div>
</div>
<div class="modal-footer d-flex justify-content-between">
<div>
<button type="button" class="clear-date-filter btn btn-danger">Clear</button>
</div>
<div>
<button type="submit" class="btn btn-success">Set Filter</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</form>
</div>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>As @ruleboy21 explained the modal needed to be initialised, that syntax worked for me but I was able to get the same result using an inline script that was more appropriate to my use case:
<script>bootstrap.Modal.getOrCreateInstance(document.getElementById('date-filter-modal')).show()</script>
This is how I solved hiding my modal window programmatically.
let modal = bootstrap.Modal.getInstance(document.getElementById("modal_id"));
modal.hide();
本文标签： javascriptBootstrap 5 modal won39t dismissStack Overflow
版权声明：本文标题：javascript - Bootstrap 5 modal won't dismiss - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742129674a2422102.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论