How to close modal programmatically in Bootstrap with React? - javascript

I am using React, Bootstrap and jQuery all together. Don't ask me why, i know it's horrible, just don't have time to get rid of jQuery. I use Bootstrap v5 and I got a modal in there, js:
<div
className='modal fade'
id="exampleModal"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div className="modal-dialog modal-dialog-centered">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="exampleModalLabel">
Select here
</h5>
</div>
</div>
</div>
</div>
Now, I got the following as well, js:
<a
className="nav-link wallet-btn"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
>
Connect here
</a>
and this <a just opens a modal which is great. Modal has a x button , js:
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
and clicking on it just closes the modal.
Problem I need to be able to close the modal programatically. As you can see, bootstrap does all this with I think(not sure) - data-bs-dismiss="modal" , but now I need such thing programatically. I tried to setAttribute but didn't work.
Prefer to use direct js real quick somewhere that fixes it instead of another jQuery code.

https://getbootstrap.com/docs/4.0/components/modal/#methods
Show
$('#myModal').modal('show')
Hide
$('#myModal').modal('hide')

Related

Bootstrap modal not becoming active element on toggle, background scrolling but modal not scrolling

I have a web page that makes use of a number of different modals to display information to the user.
These modals are triggered by certain buttons, which usually call $("#id").modal("toggle") to toggle the modal's visibility on. In one particular scenario, I have one modal which displays a second modal through the use of the above stated function. It also hides itself through the use of the same function, so I have an onClick function that does the following.
$("#EditTask").modal("hide");
$("#AddressProspect").modal("show");
The issue is that when the AddressProspect modal is displayed, it seems as though it is not being changed to the active element. The background goes dark, and the modal is displayed correctly. However when I attempt to scroll, the background elements scroll instead, as if the modal hasn't actually been displayed.
I have attempted a number of different approaches. I have used .modal("show") and .modal("hide") to display the modals I need. I have also trieddata-dismiss="modal" within the button of the modal that needs to be hidden. These have all produced the exact same result.
Interestingly, if I go to my console and execute the following commands
$("body").css("overflow-y", "hidden");
$("#AddressProspect").css("overflow-y", "scroll");
The background becomes unscrollable, and the AddressProspect modal becomes scrollable, just as I would expect.
I have around 10 modals being used within my page, and none of them have this problem apart from the one in question. I have posted the code to the two modals mentioned in this post below, with their bodies removed for clarity.
<div class="modal fade bd-example-modal-lg" id="EditTask" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"><span class="Title">Title</span></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
-snip-
</div>
<div class="modal-footer">
<div style="width: 100%">
<button type="button" class="btn btn-warning action-skip-instruction" style="float: left;" data-dismiss="modal">Skip Instruction</button>
</div>
<button type="button" class="btn btn-secondary action-close-edit-modal">Close</button>
<button type="button" id="edit-task-button-defer" class="btn btn-warning edit-task-action" style="display: none;">Defer</button>
<button type="button" id="edit-task-button-action" class="btn btn-success edit-task-action" data-dismiss="modal">Complete</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="AddressProspect" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" style="max-width: 600px;" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">New Security Address Prospect</h5>
</div>
<div class="modal-body">
-snip-
</div>
<div class="modal-footer">
<div style="width: 100%">
<button type="button" class="btn btn-warning prospect-button-clear" style="float: left;">Clear</button>
</div>
<button type="button" style="float: left;" class="btn btn-danger prospect-button-close" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success prospect-button-update">Update</button>
</div>
</div>
</div>
</div>
After a decent amount of time having issues with this problem I have managed to figure out why it is happening and how to fix it.
There are two places I looked for information on this topic:
This Github issue on the Bootstrap repo
The Bootstrap documentation on modal methods
From reading the Github issue we can see that one user notes that the calls to .modal("hide") and .modal("show") are asynchronous, therefore using them in quick succession is invalid. Instead we must wait for the show/hide to complete by listening for the shown or hidden events.
To do this we can use the following function:
$('#myModal').on('hidden.bs.modal', function (e) {
// do something...
})
By checking for the hidden.bs.modal class to be placed into the modal's classlist we can verify when the hide animation has completely finished. At this point we can then call the show method of the next modal to be displayed, ensuring that all of the background events handled by Bootstrap have finished executing, and ensuring that behaviour is expected.
My previous code goes from being:
$("#EditTask").modal("hide");
$("#AddressProspect").modal("show");
to:
$("#EditTask").modal('toggle');
$("#EditTask").on("hidden.bs.modal", function() {
$("#AddressProspect").modal('toggle');
});
As soon as I tried the new code, the weird issues with scrolling disappeared.

Boostrap modal-backdop issue (JavaScript needed)

I have some issues with Bootstrap modal. When I click to open a modal, it's seems good, but when I close modal it's all black. I noticed that when I click x (close), at the end of code I have 5 of this classes <div class="modal-backdrop fade in"></div>.
Here is the code of modal:
<div class="modal fade product-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
<h3 class="modal-title product-title">
{{$prod_name}}
</h3>
</div>
<div class="modal-body">
<div class="product-description">
{{$product->description}}
</div>
</div>
</div>
</div>
</div>
It's in PHP foreach.
Full code: pastebin.com/uZHYqqBu (first modal starts from line 221 and second from line 286).
If you are using the whole modal code inside the foreach then you will have multiple instances of modal element so the functionalities in bootstrap will not work properly since these functionalities are designed for targeting single instance of element.
So, to solve this you have to keep the modal code out of the foreach block and have to populate the data in the modal dynamically on a click event.

Extra large background modal using small Bootstrap modal

I'm having an issue with a Bootstrap modal where if I change the size to small, there is a lingering backdrop modal behind it that is still large.
In the Elements window I can remove the class="modal-content" right before uib-modal-transclude and the modal behind disappears. However I am trying to apply this change in my code and can't get it to work.
First off, this code seems to be coming from uib/template/modal/window.html or https://github.com/angular-ui/bootstrap/blob/master/template/modal/window.html
I am using ui_bootstrap/1.1.2
I tried to overwrite the template using windowtemplateurl and making the new template have:
<div modal-render="true" tabindex="-1" role="dialog" class="modal fade ng-isolate-scope in"
uib-modal-animation-class="fade" modal-in-class="in" ng-style="{'z-index': 1050 + index*10, display: 'block'}"
uib-modal-window="modal-window" size="sm" index="0" animate="animate" modal-animation="true"
style="z-index: 1050; display: block;">
<div uib-modal-transclude=""><!--
<!-- Modal -->
<div class="modal-dialog modal-sm">
<div class="modal-content modal-sm">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" ng-click="Cancel()"><span
aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title ng-binding" id="notfound"> Not Found</h4>
</div>
<div class="modal-body">
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="Cancel()">Close
</button>
<button type="button" class="btn btn-primary">Add New</button>
</div>
</div>
</div>
</div>
</div>
</div>
This didn't work. It doesn't seem like changing windowTemplateUrl changed anything at all... I also tried adding css to modal-content, however this screws up other modals on this page.
Am I on the right track? Where is this error coming from? What is the best way to fix it?
In case anyone else has this error, here is what I did to fix it.
I did find a declaration for the size of the modal to be "xl" in my code. Changed that to "sm" and there was still a wrapper around my modal that was 300x184 whereas my modal was 300x122.
I took out the class="modal-dialog" div wrapper and the second modal disappeared.

Add page to certain div in bootstrap modal windows

I am working on a project that use bootstrap, in it I need to show modal windows that contain other html page I use the following code
<a class="menuItemManageContent"
href="<%= request.getContextPath()%>/news/index/NEWS/0943ac5b-e556-49eb-acef-a112a56e3e7b/managePortlet.html"
data-toggle="modal" data-target="#modal-table_<%= request.getParameter("instanceId").toString() %>">Manage content</a>
<div id="modal-table_<%= request.getParameter("instanceId").toString() %>" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header no-padding">
<div class="table-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">
<span class="white">×</span>
</button>
mange
</div>
</div>
<div id="contentBody" class="modal-body no-padding">
</div>
</div>
<!-- /.modal-content -->
</div>
</div>
the code above work fine , it is showing the modal with my page in it the only part I need to put my content in contentBody so I still have the header for the modal as I design it, my question here is there is an easy way to do that with no javascript, can I tell the data-target to put the page in the contentBody div instead of the default modal content which is override my div.
fine, i got it work I just move the header out of the content and that solve the issue, I will leave this question hopefully it help someone else

Minimize or collapse a bootstrap 2.3.2 modal dialog?

Are there a way to add a minimize feature to bootstrap modal dialogs?
<div class="modal hide fade modal-admin" id="testModal" style="display: none;">
<div class="modal-header">
<a data-dismiss="modal" class="close">×</a>
<h3 id='dialog-heading'></h3>
</div>
<div class="modal-body">
<div id="dialog-data"></div>
</div>
<div class="modal-footer">
<a data-dismiss="modal" class="btn" >Close</a>
<a class="btn btn-primary" id="btnSaveChanges">Save changes</a>
</div>
</div>
I'm using it like a static draggable dialog:
$('#testModal').modal({backdrop:false})
$('#testModal').draggable({handle: ".modal-header"});
Maybe I'm using a wrong widget for that, but what else?
By minimize I mean that, minimize or collapse the dialog like a little
window widget.
Jquery-ui dialogs have a feature like that: http://jsbin.com/ehagoy/154
Why a -1?
Maybe something like:
$(".modal-header").click(function(){
$(".modal-body").slideToggle();
});
Could help you..
if you want a button for that, only change .modal-header for the button id:
$("#mybutton").click(function(){
$(".modal-body").slideToggle();
});

Categories

Resources