Unable to close bootstrap modal using javascript in Chrome. Same code works in firefox. Here is my modal
<div class="modal hide fade" id="reportModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="reportTitle"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="reportMsg"></div><br>
<div id="reportProgress" class="progress">
<div class="progress-bar progress-bar-striped" style="min-width: 25px;"></div>
</div>
</div>
<div class="modal-footer">
<button type="button" id="createReport" class="btn btn-primary">Create Report</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
And here are all the different things I have tried to close it:
$('#reportModal').modal('hide');
$('#reportModal').modal('toggle');
$('.modal.in').modal('hide')
$(".close").trigger("click");
All of them work in Firefox but none of them in Chrome. There are no errors in the console. Any ideas on how I can get this Modal to close?
Related
i want to show automatically bootstrap modal in my page after 5 minute from page fully loaded time and user can not be able to close modal what should i do?
also i use default modal code like below
<div class="modal fade" id="exampleModal" 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">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</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>
Use setTimeout after page load
setTimeout(()=> {
$('#exampleModal').modal({
backdrop: 'static' , keyboard: false
})
} , 30000)
I'm using Bootstrap-Native, I want to detect when a modal is closed, is there a way to do this with plain javascript?
<!-- Modal -->
<div class="modal fade" id="exampleModal" 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">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</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>
I tried:
document.getElementById("exampleModal").addEventListener("transitionend", console.log("closed"));
But event doesn't fire.
This question can be found repeated here: Bind a function to Twitter Bootstrap Modal Close.
See the answer:
var myModalEl = document.getElementById('myModalID');
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
});
I've got a serious issue with modal from Bootstrap.
When I open a modal box in my website, there's absolutly no problem (the modal-open class is correctly added on the body) the modal is correct, shade ok and content clear :
<button type="button" data-toggle="modal" data-target="#Modal_GA">buttonOpenMe</button>
When I close it manualy, it's ok too :
<button type="button" class="close2" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span><p class="TxtClose">CLOSE</p>
In my first modal, I've got two others buttons to check my previous & next projects (my website is a one-page).
And this is what i want to do :
action 1) open modal#1
action 2) scroll & click on next project
action 3) close modal#1
action 4) open modal#2, etc...
<button type="button" data-dismiss="modal" data-toggle="modal" data-target="#Modal_Animations">
CloseThis
</button>
My body had an added class called "modal-open" when a modal box is opened. But when I'm already in the first modal & I want to go into the second project (modal#2), he appears but my scroll is locked and my body lost his "modal-open" class.
I think data-dismiss="modal" clear everything. But when I add manually (with inspector) the class "modal-open" on my body when the second modal is opened, everything works.
So I tried to fix this with a lot a solution from forum post & nothing really works.
I think I had to look for this type of snippets for adding the class on the body automatically, something like that :
$(document)
.on('show.bs.modal', '.modal', function () {
$(document.body).addClass('modal-open')
})
.on('hidden.bs.modal', '.modal', function () {
$(document.body).removeClass('modal-open')
})
But actually, everything failed, obviously!
How can I fix this?
If you want to take a look to my online test version: http://bg-portfolio.com/bg_test/index.php , scroll and click on the first project "Gamers Assembly 2017", then scroll and click on "Projet suivant" (next project). The bug will appear!
PS: I'm working with Bootstrap v3.3.7 (and when I paste news files, everything is broken, so for this website, I just want to stay under this version for now)
Maybe could be more convenient, change a little bit the way as you show/hide your modals for each next/previous portfolio item.
<button type="button" class="close2" data-actual="#Modal_GA" data-target="#Modal_Animations">
<span aria-hidden="true">></span><p class="TxtClose">PROJET SUIVANT</p>
</button>
Then you can use only 1 simple jquery function:
$('.close2').click(function() {
var actualModal = $(this).attr('data-actual');
var newModal = $(this).attr('data-target');
$(actualModal).modal('hide');
$(newModal).modal('show');
});
Note that you don't need any more create a script for each portfolio item, in this way you will save time load and resource for the JS in the browser.
You've added the event listeners twice:
When I view source I can see the following on lines 583 and 1046:
$(document)
.on('show.bs.modal', '.modal', function () {
$(document.body).addClass('modal-open')
})
.on('hidden.bs.modal', '.modal', function () {
$(document.body).removeClass('modal-open')
})
I quickly removed one of the event listeners in Chromes Inspect Tool.
Right click the button in the modal you mentioned > Inspect > Event Listeners > click > then delete one of the div#Modal_GA,modal.fade.in event listeners. The next modal now scrolled correctly for me.
I assume, therefore, that by removing one of the two duplicated blocks, you will remove this second listener, which is basically firing twice and messing up your second modal...
<h1>Bootstrap 4x multiple modals in one page</h1>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg1">Large modal1</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg2">Large modal2</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg3">Large modal3</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg4">Large modal4</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg5">Large modal5</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg6">Large modal6</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg7">Large modal7</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg8">Large modal8</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg9">Large modal9</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg10">Large modal10</button>
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
<div class="modal fade bd-example-modal-lg1" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myLargeModalLabel">Large modal1</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
<div class="modal fade bd-example-modal-lg2" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myLargeModalLabel">Large modal2</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
<div class="modal fade bd-example-modal-lg3" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myLargeModalLabel">Large modal3</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
<div class="modal fade bd-example-modal-lg4" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myLargeModalLabel">Large modal4</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
<div class="modal fade bd-example-modal-lg5" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myLargeModalLabel">Large modal5</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
<div class="modal fade bd-example-modal-lg6" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myLargeModalLabel">Large modal6</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
<div class="modal fade bd-example-modal-lg7" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myLargeModalLabel">Large modal7</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
<div class="modal fade bd-example-modal-lg8" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myLargeModalLabel">Large modal8</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
<div class="modal fade bd-example-modal-lg9" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myLargeModalLabel">Large modal9</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
<div class="modal fade bd-example-modal-lg10" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myLargeModalLabel">Large modal10</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
The modal-open class gets removed after the modal has finished animating closed, but added by the other modal just as it opens. Unfortunately these animations overlap. This means that the modal-open class is added by the opening modal and then quickly removed by the closing modal (as I understand it).
Hooking into the late events of the modal (specifically shown.bs.modal, which is fired when the opening animation ends) should help you here: https://getbootstrap.com/docs/4.0/components/modal/#events
$( '#modal1' ).on( 'shown.bs.modal', function(){
document.body.classList.add( 'modal-open' );
});
$( '#modal2' ).on( 'shown.bs.modal', function(){
document.body.classList.add( 'modal-open' );
});
Tested and working over here
I'm trying to implement a bootstrap modal directive from here: DOCUMENTATION but for some reason I cannot make it work.
When I click on the button which calls the function, it shows a line over the darker background as you can see here. However you can see the template loaded in the developer tools, check the gif.
You can check my gist with the files.
Any sugestion is welcome.
The problem is in this two divs:
YOUR CODE
<div class="modal fade" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">Login / Register</h4>
</div>
<div class="modal-body">
<p>Login Form</p>
</div>
<div class="modal-footer">
<button class="btn btn-danger" type="button">Register</button>
<button class="btn btn-success" type="button">Login</button>
</div>
</div>
</div>
</div>
CHANGE TO THIS
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">Login / Register</h4>
</div>
<div class="modal-body">
<p>Login Form</p>
</div>
<div class="modal-footer">
<button class="btn btn-danger" type="button">Register</button>
<button class="btn btn-success" type="button">Login</button>
</div>
</div>
the <div class="modal fade"> is who dont let see the rest of the content.
I have following modal dialog coding,but when i click [X],the dialog doesn't closed. I invoke the dialog from button and the JavaScript function as follow;
$('#apply_Compensation_Leave').show();
Modal code
<div class="modal" id="apply_Compensation_Leave" tabindex="-1" role="dialog" aria-labelledby="messageModelLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><li class="fa fa-times"/></button>
<h3 style="font-size: 17px;">Apply Leave</h3>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
Did i miss anything?
Adding Javascript file..all javascript functions in seperate .js file.
EmpcompensationAdapter.method('getActionButtonsHtml', function(id,data) {
var html = "";
html = '<div style="width:80px;"><img class="tableActionButton" src="BASE_URL/apply.png" style="cursor:pointer;" rel="tooltip" title="Apply Leave" onclick="modJs.applyleaves();return false;"></img></div>';
return html;
});
EmpcompensationAdapter.method('applyleaves', function() {
$('#apply_Compensation_Leave').show();
});
EmpcompensationAdapter.method('showLeaveView', function() {
$('#apply_Compensation_Leave').hide();
});
When i click Back button, by calling the function showLeaveView();
Apart from adding $('#apply_Compensation_Leave').modal('show');, you need to change your HTML also. <li> tag should not be put without <ul>. It's not valid markup at all. Try putting × in your button HTML.
<div class="modal" id="apply_Compensation_Leave" tabindex="-1" role="dialog" aria-labelledby="messageModelLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 style="font-size: 17px;">Apply Leave</h3>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
Here is a Demo
Or you can provide valid markup like this <ul><li class="fa fa-times"></li></ul>
Here is a Demo with the valid markup.
The bootstrap Modal is invoked by $('#apply_Compensation_Leave').modal('show');
Try this demo.
You are opening your modal using JS.
You can use this.But this has wrong markup as #Alorika Mentioned
<div class="modal" id="apply_Compensation_Leave" tabindex="-1" role="dialog" aria-labelledby="messageModelLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
</button>
<h3 style="font-size: 17px;">Apply Leave</h3>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
JavaScript
$('#apply_Compensation_Leave').show();
Try this layout :
<div class="modal fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" data-keyboard="false">
<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"> <center>Title here </center> </h4>
</div>
<div class="modal-body">
...Body here...
</div>
<div class="modal-footer">
<button type="button" id="Okbtn" class="btn btn-danger" data-dismiss="modal"> CANCEL</button>
</div>
</div>
</div>
</div>