I was stuck on this for a while also. I have no idea why but when I used data-bs-dismiss
in stead of data-dismiss in the class for the close button it worked for me.
data-dismissis on Bootstrap 4.x version whiledata-bs-dismissis on Bootstrap 5.x version.
Please see below full code for close button.
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
GitHub
github.com › twbs › bootstrap › issues › 3628
modal data-dismiss not dismissing · Issue #3628 · twbs/bootstrap
May 29, 2012 - Trying to get the modal header X to dismiss on click without having extra js functions. Using the example from: http://twitter.github.com/bootstrap/javascript.html#modals · Here are my includes: script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> script src="themes/default/bootstrap/js/bootstrap.js"></script> Where the boostrap.js is a suite with all of the js classes inside of it. The behaviour can be fixed with I include bootstrap-modal.js but that code is already inside bootstrap.js!
Published May 29, 2012
Author skwilder
Top answer 1 of 16
197
I was stuck on this for a while also. I have no idea why but when I used data-bs-dismiss
in stead of data-dismiss in the class for the close button it worked for me.
data-dismissis on Bootstrap 4.x version whiledata-bs-dismissis on Bootstrap 5.x version.
Please see below full code for close button.
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
2 of 16
93
remove the "fade" class.
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">change to
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
Fade is an effect, if you remove fade, your modal will not have fade effect. The several problem which cause this issue is not call modal with right method.
Wrong method : $("#myModal").show();
Right method : $("#myModal").modal('show');
Videos
GitHub
github.com › twbs › bootstrap › issues › 30569
Bootstrap 4 Modals: data-dismiss="modal" won't work if fade is present · Issue #30569 · twbs/bootstrap
April 13, 2020 - I'm migrating a Bootstrap 3 app to Bootstrap 4 and noticed that the close button does not work anymore. After some googling, I found this answer on Stackoverflow where someone noted it would work if you remove the fade on the modal: http...
Author derwaldgeist
MDBootstrap
mdbootstrap.com › standard › material design for bootstrap 5 & vanilla javascript
Modal dismiss button not working on click or modal.hide - Material Design for Bootstrap
After I open a modal I cannot close it, nor with the dismiss button, nor with the modal('hide') method · It happens only with the new version 4.9.0, can you please check? ... I created a snippet with modal. I use 4.9.0 version and everything works great.
GitHub
github.com › twbs › bootstrap › issues › 17956
<a data-dismiss="modal" data-toggle="modal"> doesn't work · Issue #17956 · twbs/bootstrap
It is similar to the earlier discussed ... example was found at http://jsbin.com/venek/1/edit Screen size should be adjusted so that the opened modal goes behind its bottom edge....
Top answer 1 of 6
37
The hiding functionality is implemented in the modal.js in this way.
this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
Basically it's just finding the elements that have the attribute of data-dismiss and the value of modal. Upon click it will hide these elements.
2 of 6
21
Replace data-dismiss="modal" by: onclick="$('#modal_id').modal('hide');"
You should have something like this:
<button type="button" class="close" onclick="$('#modal_id').modal('hide');" aria-label="Close">
onclick="$('#modal_id').modal('hide');" will close only the particular modal in which it is placed.
Drupal
drupal.org › project › bootstrap_agency › issues › 2678006
Bootstrap modal not working - unable to close a modal or view it correctly [#2678006] | Drupal.org
April 27, 2018 - <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> ... I was having the same issue. Not sure if this helps, but I created a block view for the modal.
GitHub
github.com › twbs › bootstrap › issues › 21469
Bootstrap modal close button does not work if we have 2 or more modals on same page · Issue #21469 · twbs/bootstrap
Hello, I have two modals on same page, and I think because of that I have issue with modal close button, when I click modal does not close, but this is only the case with the first modal, because with second there is no problem. Do you have any idea how to fix this issue? With this code works perfect · <div class="modal-content"> <div class="modal-header"> <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true" title="Close">×</span> <span class="sr-only">Close</span></button> </div> <div class="modal-body"> <div class="row"> <div class="col-xs-12 col-sm-12 col
Author ghost
Top answer 1 of 2
2
I was able to figure out my issue. It was that in my own JS file, I wanted to add into every button click event, event.stopPropagation(); Since this was a method, and I did not want this added multiple times to the same button every time it was called, I would remove the previous click events, which was removing Bootstrap's dismiss click event.
So, if you have this same issue and you have all of Bootstrap's JS added correctly, check your own code to make sure you're not overwriting/removing events.
UPDATE
Just to clarify, event.stopPropagation() prevents data-dismiss from working.
2 of 2
0
if you put into your code (in some cases it makes sense):
$modal.off('click')
then it also results that the modal won't be closed because the event is blocked.
In that case you have to handle it yourself:
$modal
.on('click', '[data-dismiss="modal"]', function() {
$modal.modal('hide');
});
Bootstrap
getbootstrap.com › docs › 4.4 › components › modal
Modal · Bootstrap
It also adds .modal-open to the <body> to override default scrolling behavior and generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal. Activate a modal without writing JavaScript. Set data-toggle="modal" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific modal to toggle.
Bootstrap
getbootstrap.com › docs › 5.0 › components › modal
Modal · Bootstrap v5.0
<div class="modal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <p>Modal body text goes here.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> Toggle a working modal demo by clicking the button below.
Lightrun
lightrun.com › answers › twbs-bootstrap-bootstrap-4-modals-data-dismissmodal-wont-work-if-fade-is-present
Bootstrap 4 Modals: data-dismiss="modal" won't work if fade is present
Edit: I see what your saying now - it works without fade or with fade and modal-dialog. I would still say that the complete markup for a modal should be used instead of these custom instances where that are being created. https://getbootstrap.com/docs/4.4/components/modal/#modal-components Read more comments on GitHub > Bootstrap close modal not working - Stack Overflow
MDBootstrap
mdbootstrap.com › standard › material design for bootstrap 5 & vanilla javascript
Modal not working - Material Design for Bootstrap
<div class="fixed-action-btn" style="bottom: 45px; right: 24px;"> <a class="btn-floating btn-large pink" data-toggle="modal" data-target="#basicExample"> <i class="fa fa-envelope"></i> </a> </div> <!-- Modal --> <div class="modal fade" id="basicExample" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog" role="document"> <!--Content--> <div class="modal-content"> <!--Header--> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4> </div> <!--Body--> <div class="modal-body"> ...
YouTube
youtube.com › watch
Bootstrap 5 modal close button not working (SOLVED) - YouTube
👉 Professional JavaScript Course: https://bytegrad.com/courses/professional-javascript👉 Professional CSS Course: https://bytegrad.com/courses/professional-...
Published November 18, 2022
Top answer 1 of 4
20
Remove data-dismiss="modal" from the button and Using Jquery you can close a particular modal.Create a function and have the below code inside the function and call that function on the close button click
$('#modalid').modal('hide');
2 of 4
12
That works for me. Only Close that modal. No extra function.
<button type="button" class="close" onclick="$('#my_modal').modal('hide');" aria-label="Close">
Google Groups
groups.google.com › g › angular › c › txxjWrGl85k
angularjs ng-click with boostrap's data-dismiss="modal"
April 14, 2013 - Nor would it work if the modal('hide') within the ng-click, I think it wouldn't work because of Angular's $scope. <div class="modal-footer"> <button type="button" class="btn btn-link notes-cancel-btn" data-dismiss="modal" ng-click="ctrl.cancelEdit();">Cancel</button> <button type="button" class="btn btn-primary" onclick="$('.create-new-note').modal('hide')" ng-click="ctrl.createNote()" ng-disabled="bodyError()">Send!</button> </div>
Team Treehouse
teamtreehouse.com › community › modal-not-displaying-although-i-followed-the-video-exactly
Modal not displaying although I followed the video exactly (Example) | Treehouse Community
December 31, 2022 - </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> ... When posting code, always use Markdown formatting to preserve the code's appearance and retain special symbols. An even better way to share code and make your issue easy to replicate is to make a snapshot of your workspace and post the link to it here.
GitHub
github.com › twbs › bootstrap › issues › 7192
links inside the modal that use data-dismiss="modal" don't go to their destination · Issue #7192 · twbs/bootstrap
March 7, 2013 - <a class="btn" data-toggle="modal" href="#myModal2" role="button">Launch demo modal</a> <div aria-hidden="true" aria-labelledby="myModalLabel" class="modal hide fade" id="myModal" role="dialog" tabindex="-1"> <div class="modal-header"> <a href="http://www.google.com" data-dismiss="modal" data-target="#">Click me</a> </div> </div>
Author waynn
Codeply
codeply.com › p › qikoyVgKHL
Bootstrap 5 modal not working (solved) on Codeply
HTML, CSS, JavaScript editor playground for designers & developers to compare, prototype and test frontend frameworks
GitHub
github.com › twbs › bootstrap › issues › 33469
Reset inside a Dialog does not work if data-dismiss="modal" is set. · Issue #33469 · twbs/bootstrap
March 24, 2021 - Hello, I found an issue when using the reset form button inside a Dialog. If the button does reset and dismissal by using data-dismiss="modal", the dialogs close fine but the form is never reset. Test case on codepen: https://codepen.io/...
Author meduzapat