Boostrap Modal doesn't work

Boostrap Modal doesn't work - javascript

Hello I hope you can help me with the problem I'm having right now.
I'm trying to execute a code in JS using modals when pressing a button, the thing is, the HTML code who has the button generates itself
Main View page
<tr class="odd">
<td class=" sorting_1">CU</td>
<td class="">Cliente Unico</td><td class="">101</td>
<td class="">
<span id="edit_CU" class="ui-icon ui-icon-pencil" data-toggle="modal" data-target="#modal_edit"></span>
<span id="delete_CU" class="ui-icon ui-icon-trash" data-toggle="modal" data-target="#modal_delete"></span>
</td>
</tr>
In the id="edit_CU" the CU changes when the HTML code is generated, so is not always the same thats also with the id="delete_CU"
When you click in the span icon will trigger the modal and show this:
View page when you click Edit or Delete button
<div id="modal_delete" class="modal fade">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Delete vertical</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal_delete">Yes</button>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="<?php echo base_url('assets/js/helper/func_verticales.js');?>"></script>
In this view page ask the user if they want to delete their information when they click "Yes" it should pop up a message... but it does nothing, someone can give me a hand?
This is the JavaScript
$("#modal_delete").on('show.bs.modal', function(event){
alert("hello");
});
});

if i understand you correctly than you've to delegate the click event
try something like this:
Your button needs some adaption - because i don't see a reason for data-toggle and data-target
<button type="button" class="btn btn-primary">Yes</button>
After that - in your JS Code:
$("button.btn-primary").on("click","#modal_delete",function()
{
alert("hello");
});

Run that alert off your button, not the modal
<button id="modal_delete">Yes</button>
$("#modal_delete").on('click', function(event){
alert("hello");
});
});
or use a confirm box
$('#modal_delete').click(function(ev){
ev.preventDefault();
var r = confirm("Are you sure?");
if (r == true) {
//run delete code here
}
});

Related

is there a way to pass a variable to modal using a link

here is my link and the sample data value i want to pass "data-id"
<i class="fas fa-edit fa-lg fa-fw"></i>
javascript code to load the modal and assign the data value to the modal
<script>
$("#openModal").click(function(){
$(".modal-body").text($(this).data("id"));
$("#edit_task").modal("open");
});
</script>
my modal
<div class="modal fade" id="edit_task">
<div class="modal-dialog">
<div class="modal-content">
<form action="" method="post" enctype="multipart/form-data">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">add new user</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
modal body i would like to display the modal variable here
<!-- Modal body -->
<div class="modal-body">
</div>
modal footer
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<?php
echo "<button type='submit' class='btn btn-primary' name='edit' onclick='return mess()'; >";echo "save"; echo "</button>";
?>
</div>
function to confirm when a value is saved
<script type="text/javascript">
function mess(){
alert ("the new user is successfully saved");
return true;
}
</script>
end of the modal
</form>
</div>
</div>
</div>

I have created a working fiddle of what you are looking for.
I changed your Wah button, replacing the href attribute with a data-target attribute:
<a class="btn btn-primary" data-toggle="modal" data-target="#edit_task" data-id="Wah">Wah</a>
Note: If you want the button to look like a link then replace the btn-primary class I used in the example with btn-link
Instead of using a click event on a button, use bootstraps show.bs.modal event. The $(event.relatedTarget) syntax is how you can get the button object for the button that was clicked to open the modal.
$(document).ready(function(){
$('#edit_task').on('show.bs.modal', function (event) {
$('#edit_task').find('.modal-body').text($(event.relatedTarget).data('id'));
})
});

Change href of modal based on button click

Clicking this button opens the modal
<button type="button" id ="soldBtn" class="btn btn-info" data-toggle="modal" data-target="#myModal">This laptop has been sold</button>
This is the modal
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<p>Confirmation</p>
</div>
<div class="modal-body">
<p>Are you sure you want to do this?</p>
</div>
<div class="modal-footer">
<a class="btn btn-outline-success" id="confirmBtn" href="#" >Yes</a>
<a class="btn btn-outline-danger" id="cancelBtn" data-dismiss="modal">No</a>
</div>
</div>
</div>
</div>
</div>
I could just have a different modal for different buttons, but I'd rather follow the DRY principle. I'd like the href of the confirmBtn to change based on which button to open the modal was clicked. I've tried this so far but not even sure if I'm on the right track.
<script type="text/javascript">
if(jQuery('#soldBtn').data('clicked')) {
document.getElementById("confirmBtn").href="{%url 'laptops:sale'%}";
}
</script>

You should first wait for your DOM to load. This can be done by wrapping your script code with the following:
$(function(){
// Here you will place the code that follows
});
Then you should register an event handler for the click event on the DOM element with id soldBtn:
$("#soldBtn").on('click', function(){
var confirmBtnEle = $("#confirmBtn");
confirmBtnEle.attr('href','%url 'laptops:sale'%');
});
Apparently, you have to change the second argument we pass to attr method above to be that you want to be.

I need to set next button as disabled till any radio button got selected

In my use case i need to set Next button from a popup is disabled in default till any one of the radio button got selected.
Need to achieve this in Ember.Js
My hbs code (for that popup):
{{! To list all accounts in popup }}
<div id="listAllAccounts" class="modal animated fadeInUp modal-pop downloadAsPopup">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" {{action 'clearModal'}}>×</button>
<h4 class="modal-title">List of accounts</h4>
</div>
<div class="modal-body">
<div class="textGroup">
<h2 class="primaryTitle">Select an account.</h2>
</div>
<div class="modalTableHolder">
<table class="primaryListTable" id="AccountsInfo">
<thead>
<td class="tablestyle5">Account ID</td>
<td class="tablestyle5">Account Name</td>
</thead>
<tbody>
{{#each model.integration as |list index|}}
<tr>
<td class="tablestyle5"><input type="radio" name="accounts" class="messageCheckbox mt6 mR5" data-acc-name={{list.ACCOUNT_NAME}} value={{list.ACCOUNT_ID}}>{{list.ACCOUNT_ID}}</td>
<td class="tablestyle5">{{list.ACCOUNT_NAME}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<div class="text-right">
<button type="button" class="btn btn-primary" data-dismiss="modal" aria-hidden="true" {{action 'clearModal'}}>Cancel</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" aria-hidden="true" {{action 'showContainerPopup' 'clearModal'}}>Next</button>
</div>
</div>
</div>
</div>
</div>
{{! To list all accounts in popup Ends }}
JS code:
Ember.run.scheduleOnce('afterRender', this, function() {
new URI(Abc, this.get('currentOrg.ABC_ID'), Project, this.get('defaultProject.PROJECT_ID'), Integration)
.addQueryParam('email', this.get(email))
.GETS()
.then(function(res) {
if(res.length !== 0){
var sett = projectObj.get("INTEGRATION");
self.set("model.integration", res); //this is where i set data to that popup
common.hideModal("loadingPopup");
common.showModal("listAllAccounts");
} else {
common.hideModal("loadingPopup");
options.content = i18n("enable.integration.noaccount.error");
options.type = 'warning';
dialog.showCard(options);
}
});
This is the popup. I need to disable the next button until anyone selects any one radio button. If radio button is checked i need to enable next option.

You can use .change() or .one("change") to check whether they select yet.
$(".text-right button:last").prop("disabled", true); // disable the button
$('input[type="radio"]').one("change", function () {
$(".text-right button:last").prop("disabled", false); // enable it;
});

First you can disable your button using
disabled="disabled"
when pop is appear and add extra class for next button btn-next.
And check if radio button is checked or not to enable your button.
$(document).on('click',"input:radio[name='accounts']",function () {
if ($(this).is(':checked')) {
$(".btn-next").prop("disabled", false);
}
});

Issue in passing a data id to bootstrap modal

I have a listing page containing a link button to show modal repeating in a PHP loop. I have searched and found these:
Passing data to a bootstrap modal, Passing data to Bootstrap 3 Modal and Pass id to Bootstrap modal and some others but failed.
What I want
I have fetched the data id from database and pass it to bootstrap modal and there I will use this id to display more info through MySQL queries.
I have written all the code but the ID is not passing to the modal.
Modal Link Button code
<a class="btn btn-warning btn-minier" href="#modal-form-show" role="button" data-toggle="modal" data-target="#myModal" data-id="<?php echo $cottage_id ?>"><i class="icon-edit bigger-120"></i> Reservation </a>
Modal code
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Reservation Details</h4><br>
<h5>Cottage Id :</h5>
<h5>Cottage Title :</h5>
</div>
<div class="modal-body">
<p>ID WILL SHOW IN THIS TEXT FIELD.
<input type="text" name="cottage" placeholder="cottage id" value="" id="cottage" />
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
JS code
$('#modal-form-show').on('show.bs.modal', function(e) {
var c_id= $('a[href="#modal-form-show"]').data('id');
//var c_id= $(this).data(id) - checked both
$("#cottage").val(c_id);
});
I have taken a text input in modal named cottage and I want show that id in this input.

Try this snippet:
$('.btn-minier').click(function(){
var c_id = $(this).attr('data-id');
$('#cottage').val(c_id);
});

I have change little , when button click show the popup & i've set the value of data-id=2
Button
<a class="btn btn-warning btn-minier" id="btnModalPopup" href="" role="button" data-toggle="modal" data-target="" data-id="2"><i class="icon-edit bigger-120"></i> Reservation </a>
I add button in you modal
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Reservation Details</h4><br>
<h5>Cottage Id :</h5>
<h5>Cottage Title :</h5>
</div>
<div class="modal-body">
<p>
ID WILL SHOW IN THIS TEXT FIELD.
<input type="text" name="cottage" placeholder="cottage id" value="" id="cottage" readonly />
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success" data-dismiss="modal" id="btnSubmit">Submit</button>
</div>
</div>
</div>
</div>
Javascript code
<script>
$(document).ready(function () {
$('#btnModalPopup').click(function () {
var c_id = $(this).data('id');
console.log(c_id)
$('#myModal #cottage').val(c_id)
$('#myModal').modal('show')
});
$('#btnSubmit').click(function () {
alert('submit button click')
// get the id , from input field.
var id = document.getElementById('cottage').value;
console.log(id)
alert(id)
//You can set the id - to php variable - then hit to sever by ajax
})
});
</script>

Try using attr method of JQuery
$('#modal-form-show').on('show.bs.modal', function(e) {
// instead of this
//var c_id= $('a[href="#modal-form-show"]').data('id');
// try this one
var c_id= $('a[href="#modal-form-show"]').attr('data-id');
//var c_id= $(this).data(id) - checked both
$("#cottage").val(c_id);
});

Bootstrap modal: close current, open new

I have looked for a while, but I can't find a solution for this. I want the following:
Open an URL inside a Bootstrap modal. I have this working off course. So the content is loaded dynamically.
When an user pushes a button inside this modal, I want the current modal to hide, and immediately after that, I want a new modal to open with the new URL (which the user clicked on). This content of the 2nd modal is also loaded dynamically.
If the user then closes that 2nd modal, the first modal must come back again.

I know this is a late answer, but it might be useful.
Here's a proper and clean way to get this done, as #karima's mentioned above. You can actually fire two functions at once; trigger and dismiss the modal.
HTML Markup;
<!-- Button trigger modal -->
<ANY data-toggle="modal" data-target="TARGET">...</ANY>
<div class="modal fade" id="SELECTOR" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body"> ... </div>
<div class="modal-footer"> <!-- ↓ --> <!-- ↓ -->
<ANY data-toggle="modal" data-target="TARGET-2" data-dismiss="modal">...</ANY>
</div>
</div>
</div>
</div>
Demo

Without seeing specific code, it's difficult to give you a precise answer. However, from the Bootstrap docs, you can hide the modal like this:
$('#myModal').modal('hide')
Then, show another modal once it's hidden:
$('#myModal').on('hidden.bs.modal', function () {
// Load up a new modal...
$('#myModalNew').modal('show')
})
You're going to have to find a way to push the URL to the new modal window, but I'd assume that'd be trivial. Without seeing the code it's hard to give an example of that.

It's not exactly the response but it's useful when you want to close the current modal and open a new modal.
In the html in the same button, you can ask to close the current modal with data-dismiss and open a new modal directly with data-target:
<button class="btn btn-success"
data-toggle="modal"
data-target="#modalRegistration"
data-dismiss="modal">Register</button>

I use this method:
$(function() {
return $(".modal").on("show.bs.modal", function() {
var curModal;
curModal = this;
$(".modal").each(function() {
if (this !== curModal) {
$(this).modal("hide");
}
});
});
});

Problem with data-dismiss="modal" is it will shift your content to left
I am sharing what worked for me, problem statment was opening pop1 from pop2
JS CODE
var showPopup2 = false;
$('#popup1').on('hidden.bs.modal', function () {
if (showPopup2) {
$('#popup2').modal('show');
showPopup2 = false;
}
});
$("#popup2").click(function() {
$('#popup1').modal('hide');
showPopup2 = true;
});

As mentioned above In the html in the same button, you can ask to close the current modal with data-dismiss and open a new modal directly with data-target:
<button class="btn btn-success" data-toggle="modal" data-target="#modalRegistration" data-dismiss="modal">Register</button>
But this will cause scroll-bar to disappear and you will notice that if the second modal was taller than the first one
So the solution is to add the following style in the modal inline style :
Style = "overflow-y : scroll ; "

By using the following code you can hide first modal and immediately open second modal, by using same strategy you can hide second modal and show the first one.
$("#buttonId").on("click", function(){
$("#currentModalId").modal("hide");
$("#currentModalId").on("hidden.bs.modal",function(){
$("#newModalId").modal("show");
});
});

You need to add following attribute to the link or button where you want add this functionality:
data-dismiss="modal" data-toggle="modal" id="forgotPassword" data-target="#ModalForgotPassword"
A detaile blog: http://sforsuresh.in/bootstrap-modal-window-close-current-open-new-modal/

data-dismiss="modal"
it is used to close the existing opened model. you can set it to the new model

For Bootstrap v4
You can toggle between modals by having putting data-dismiss="modal" and data-toggle="modal" in the same HTML element. You'd also need the data-target attribute set to the modal you'd like to open.
Here's an example:
<button type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#Modal2" >
Open second modal
</button>
Remember to set an id for each of the modals and have the data-target point to the one you'd like to open
For bootstrap v5
Same as v4 just using the attributes data-bs-toggle data-bs-dismiss and data-bs-target
Like this:
<button class="btn btn-primary" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#Modal2" >
Open second modal
</button>
They've included an example of this in the v5 documentation
NOTE:
The two modals need to be independent of each other, not nested in one another, in order for this to work.
So if you're using an MVC framework, say for example ASP.NET MVC, and have the first modal as its own partial view, you can't have the second modal in that view. You'll need to put the second modal in the parent view.

With BootStrap 3, you can try this:-
var visible_modal = jQuery('.modal.in').attr('id'); // modalID or undefined
if (visible_modal) { // modal is active
jQuery('#' + visible_modal).modal('hide'); // close modal
}
Tested to work with: http://getbootstrap.com/javascript/#modals (click on "Launch Demo Modal" first).

I have exact same problem, and my solution is only if modal dialog have [role="dialog"] attribute :
/*
* Find and Close current "display:block" dialog,
* if another data-toggle=modal is clicked
*/
jQuery(document).on('click','[data-toggle*=modal]',function(){
jQuery('[role*=dialog]').each(function(){
switch(jQuery(this).css('display')){
case('block'):{jQuery('#'+jQuery(this).attr('id')).modal('hide'); break;}
}
});
});

I had the same issue as #Gravity Grave whereby scrolling doesn't work if you use
data-toggle="modal" data-target="TARGET-2"
in conjunction with
data-dismiss="modal"
The scroll doesn't work correctly and reverts to scrolling the page rather than the modal. This is due to data-dismiss removing the modal-open class from the tag.
My solution in the end was to set the html of the inner component on the modal and use css to fade the text in/out.

Had the same issue, writing this here in case someone in the future stumbles upon this and has issues with multiple modals that have to have scrolling as well (I'm using Bootstrap 3.3.7)
What I did is have a button like this inside my first modal:
<div id="FirstId" data-dismiss="modal" data-toggle="modal" data-target="#YourModalId_2">Open modal</div>
It will hide the first and then display the second, and in the second modal I would have a close button that would look like this:
<div id="SecondId" data-dismiss="modal" data-toggle="modal" data-target="#YourModalId_1">Close</div>
So this will close the second modal and open up the first one and to make scrolling work I added to my .css file this line:
.modal {
overflow: auto !important;
}
PS: Just a side note, you have to have these modals separately, the minor modal can not be nested in the first one as you hide the first one
So here's the full example based on the bootstrap modal example:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal 1 -->
<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">
Add lorem ipsum here
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#exampleModal2">
Open second modal
</button>
</div>
</div>
</div>
</div>
<!-- Modal 2 -->
<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" data-toggle="modal" data-target="#exampleModal">Close</button>
</div>
</div>
</div>
</div>

This code, close modal opened, open the new modal but inmediatly, new modal is closed.
$(nameClose).modal('hide');
$(nameOpen).modal('show');
My solution for open new modal after close other is:
function swapModals(nameClose,nameOpen) {
$(nameClose).modal('hide');
$(nameClose).on('hidden.bs.modal', function () {
console.log('Fired when hide event has finished!');
$(nameOpen).modal('show');
});
}

Using click function:
$('.btn-editUser').on('click', function(){
$('#viewUser').modal('hide'); // hides modal with id viewUser
$('#editUser').modal('show'); // display modal with id editUser
});
Heads up:
Make sure that the one you want to show is an independent modal.

In first modal:
replace modal dismiss link in footer with close link below.
<div class="modal-footer">
Close
</div>
In second modal:
Then second modal replace top div with below div tag.
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="add text for disabled people here" aria-hidden="true" id="second_model_id">

Try this
$('#model1').modal('hide');
setTimeout(function(){
$('#modal2').modal('show');
},400);

just close all open modals before opening a new one
$('.modal').modal('hide'); // close all open modals
$('#login').modal('show'); // open a modal named #login

$("#buttonid").click(function(){
$('#modal_id_you_want_to_hid').modal('hide')
});
// same as above button id
$("#buttonid").click(function(){
$('#Modal_id_You_Want_to_Show').modal({backdrop: 'static', keyboard: false})});

I use another way:
$('#showModal').on('hidden.bs.modal', function() {
$('#easyModal').on('shown.bs.modal', function() {
$('body').addClass('modal-open');
});
});

If you want to close the previously opened modal while opening the new modal then you must do it from javascript/jquery by first closing the current open modal and then give a 400ms timeout to allow it to close and then open the new modal like below code :
$('#currentModal').modal('hide');
setTimeout(function() {
//your code to be executed after 200 msecond
$('#newModal').modal({
backdrop: 'static'//to disable click close
})
}, 400);//delay in miliseconds##1000=1second
If you try to do it with the data-dismiss="modal" then it will have the scroll issue as mentioned by #gravity and #kuldeep in comments.

None of the answers helped me since I wanted to achieve something which was exactly the same as mentioned in the question.
I have created a jQuery plugin for this purpose.
/*
* Raj: This file is responsible to display the modals in a stacked fashion. Example:
* 1. User displays modal A
* 2. User now wants to display modal B -> This will not work by default if a modal is already displayed
* 3. User dismisses modal B
* 4. Modal A should now be displayed automatically -> This does not happen all by itself
*
* Trying to solve problem for: http://stackoverflow.com/questions/18253972/bootstrap-modal-close-current-open-new
*
*/
var StackedModalNamespace = StackedModalNamespace || (function() {
var _modalObjectsStack = [];
return {
modalStack: function() {
return _modalObjectsStack;
},
currentTop: function() {
var topModal = null;
if (StackedModalNamespace.modalStack().length) {
topModal = StackedModalNamespace.modalStack()[StackedModalNamespace.modalStack().length-1];
}
return topModal;
}
};
}());
// http://stackoverflow.com/a/13992290/260665 difference between $.fn.extend and $.extend
jQuery.fn.extend({
// https://api.jquery.com/jquery.fn.extend/
showStackedModal: function() {
var topModal = StackedModalNamespace.currentTop();
StackedModalNamespace.modalStack().push(this);
this.off('hidden.bs.modal').on('hidden.bs.modal', function(){ // Subscription to the hide event
var currentTop = StackedModalNamespace.currentTop();
if ($(this).is(currentTop)) {
// 4. Unwinding - If user has dismissed the top most modal we need to remove it form the stack and display the now new top modal (which happens in point 3 below)
StackedModalNamespace.modalStack().pop();
}
var newTop = StackedModalNamespace.currentTop();
if (newTop) {
// 3. Display the new top modal (since the existing modal would have been hidden by point 2 now)
newTop.modal('show');
}
});
if (topModal) {
// 2. If some modal is displayed, lets hide it
topModal.modal('hide');
} else {
// 1. If no modal is displayed, just display the modal
this.modal('show');
}
},
});
Working Fiddle for reference, JSFiddle: https://jsfiddle.net/gumdal/67hzgp5c/
You just have to invoke with my new API "showStackedModal()" instead of just "modal('show')". The hide part can still be the same as before and the stacked approach of showing & hiding the modals are automatically taken care.

Simple and elegant solution for BootStrap 3.x. The same modal can be reused in this way.
$("#myModal").modal("hide");
$('#myModal').on('hidden.bs.modal', function (e) {
$("#myModal").html(data);
$("#myModal").modal();
// do something more...
});

if you use mdb use this code
var visible_modal = $('.modal.show').attr('id'); // modalID or undefined
if (visible_modal) { // modal is active
$('#' + visible_modal).modal('hide'); // close modal
}

<div class="container">
<h1>Bootstrap modal: close current, open new</h1>
<p class="text-muted">
A proper and clean way to get this done without addtional Javascript/jQuery. The main purpose of this demo is was to answer this
question on stackoverflow
</p>
<hr />
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo-1">Launch Modal #1</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#demo-2">Launch Modal #2</button>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#demo-3">Launch Modal #3</button>
<!-- [ Modal #1 ] -->
<div class="modal fade" id="demo-1" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
<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 caps"><strong>Demo Modal #1</strong></h4>
</div>
<div class="modal-body">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Input Placeholder..." />
<span class="input-group-btn"><button class="btn btn-default" type="button">Action</button></span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">×</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#demo-2" data-dismiss="modal">Close current, Launch Modal #2</button>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#demo-3" data-dismiss="modal">Close current, Launch Modal #3</button>
</div>
</div>
</div>
</div>
<!-- [ Modal #2 ] -->
<div class="modal fade" id="demo-2" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
<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 caps"><strong>Demo Modal #2</strong></h4>
</div>
<div class="modal-body">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Input Placeholder..." />
<span class="input-group-btn"><button class="btn btn-default" type="button">Action</button></span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">×</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo-1" data-dismiss="modal">Close current, Launch Modal #1</button>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#demo-3" data-dismiss="modal">Close current, Launch Modal #3</button>
</div>
</div>
</div>
</div>
<!-- [ Modal #3 ] -->
<div class="modal fade" id="demo-3" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
<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 caps"><strong>Demo Modal #3</strong></h4>
</div>
<div class="modal-body">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Input Placeholder..." />
<span class="input-group-btn"><button class="btn btn-default" type="button">Action</button></span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">×</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#demo-1" data-dismiss="modal">Close current, Launch Modal #1</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo-2" data-dismiss="modal">Close current, Launch Modal #2</button>
</div>
</div>
</div>
</div>
<hr />
<h3 class="caps">Usage:</h3>
<pre class="prettyprint"><!-- Button trigger modal -->
<ANY data-toggle="modal" data-target="TARGET">...</ANY>
<div class="modal fade" id="SELECTOR" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body"> ... </div>
<div class="modal-footer"> <!-- ↓ --> <!-- ↓ -->
<ANY data-toggle="modal" data-target="TARGET-2" data-dismiss="modal">...</ANY>
</div>
</div>
</div>
</div></pre>
</div> <!-- end .container -->
<hr />
<footer class="text-center">#_elmahdim</footer>
<br />
<br />

I might be a bit late to this but I think I've found working solution.
Required -
jQuery
All modals with a closing/dismissal button having attributes set as follows -
<button type="button" class="btn close_modal" data-toggle="modal" data-target="#Modal">Close</button>
Please see the class close_modal added to the button's classes
Now to close all existing modals, we'll call
$(".close_modal").trigger("click");
So, wherever you want to open a modal
Just add the above code and your all open modals shall get closed.
Then add your normal code to open the desired modal
$("#DesiredModal").modal();

Hide modal dialog box.
Method 1: using Bootstrap.
$('.close').click();
$("#MyModal .close").click();
$('#myModalAlert').modal('hide');
Method 2: using stopPropagation().
$("a.close").on("click", function(e) {
$("#modal").modal("hide");
e.stopPropagation();
});
Method 3: after shown method invoke.
$('#myModal').on('shown', function () {
$('#myModal').modal('hide');
})
Method 4: Using CSS.
this.display='block'; //set block CSS
this.display='none'; //set none CSS after close dialog

Just copy and paste this code and you can experiment with two modals. Second modal is open after closing the first one:
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- The Modal 2 -->
<div class="modal" id="myModal2">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Second modal</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$('#myModal').on('hidden.bs.modal', function () {
$('#myModal2').modal('show')
})
</script>
Cheers!

Develop Reference

JavaScript is the programming language of the Web.

Boostrap Modal doesn't work - javascript

Related

is there a way to pass a variable to modal using a link

Change href of modal based on button click

I need to set next button as disabled till any radio button got selected

Issue in passing a data id to bootstrap modal

Bootstrap modal: close current, open new

Categories

Resources