Capture BootstrapNative Modal close event without jQuery - javascript

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...
});

Related

Don't click on screen when click a model

I created a modal in HTML, but when i click button, i can't close popup display
enter image description here
code
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-backdrop="true" data-keyboard="false">
Launch demo modal
</button>
<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">
Content
</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>

Try adding z-index for the modal-content
<div class="modal-content" style="z-index:9999">

show customize bootstrap modal after 5 minute in page?

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)

Find the active bootstrap modal using javascript

I do have dynamically generated modals with different Ids in it. I want to know which modal is opened/ shown to the user. I have a solution, If I do know the id of the model as
$('#modelId').on('show.bs.modal', function (event) { // modelId is dynamic
var button = $(event.relatedTarget);
var productid = button.data('target');
console.log(productid)
});
But How to get the modalId when we do not know which modal is triggered by the user?

Attach the event listener to the document instead. Example:
$(document).on('show.bs.modal', function(event) { // modelId is dynamic
var button = $(event.relatedTarget);
var productid = button.data('target');
console.log(productid)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch exampleModal
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal2">
Launch exampleModal2
</button>
<!-- 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>
<div class="modal fade" id="exampleModal2" 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>

instead of taking to a different page, open page in modal

I'm not sure if this is possible but what I'm trying to do is when user clicks a button then instead of taking the user to a different page, I want the new page to be opened in a modal, and be active there. I'm using twitter bootstrap. is it possible to do that?
bootstrap modal:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- 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>
my link:
hello

Add different ID to 2 different Bootstrap modal-backdrop

I have 2 modals on a page, each modal have different behaviors, one modal is transformed into a page content if the page is bigger than a specified width. To enable that I have used jQuery to hide its modal-backdrop but the problem is that the script will also hide the backdrop for the 2nd modal which has normal behavior. How can I assign a different ID for each modal-backdrop?
HTML
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">
Launch modal with modal-backdrop id 1
</button>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">
Launch modal with modal-backdrop id 2
</button>
<!-- Modal1 modal-backdrop id 1-->
<div class="modal fade" id="myModal1" 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>
<!-- Modal2 modal-backdrop id 2-->
<div class="modal fade" id="myModal2" 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>

You can make use of bootstrap modal's .on('show.bs.modal' event to make changes to your backdrop accordingly like one below:
$("#myModal1,#myModal2").on('show.bs.modal', function (e) {
var that=$(this);
var id=that.attr('id'); //get the id of button which got clicked
setTimeout(function(){
$('.modal-backdrop').attr('data-id',id);
//You can either assign it as data-* attribute or add it as class to backdrop like
//$('.modal-backdrop').addClass(id);
});
});
Now accordingly you can use this to make changes according to modal's behavior.
DEMO

This will solve your problem.
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-keyboard="false" data-backdrop="static" >

Categories

Resources