Submitting form data from modal, modal won't close - javascript

I'm creating a type of content management system that allows users to create pages based on templates.
I have a page that has 2 placeholder divs. Below is an example of one. When you click on the div, a modal pops up that allows the user to use TinyMCE to create content. The idea is to set the content, hit the "Get Data" button and have the modal disappear with the content from the editor now displaying inside the original div.
This is working as far as p utting the content in the div when I hit submit. The body of the modal disappears at this point, but the gray opacity screen that usually sits under the bootstrap modal is still present and I can't any longer do anything on the page. I'm wondering what I'm doing wrong here and how I can fix it to fully close the modal when I hit the submit button.
<div class="leftContent">
<div class="modal fade bd-example-modal-lg" id="leftFiftyModal" tabindex="-1" role="dialog" aria-labelledby="leftFiftyLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="leftFiftyModal">Content Library:</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h3>Create your own content</h3>
<form id="form-data" method="post">
<textarea id="mytextarea"></textarea>
<input type="submit" value="Get Data">
</form>
</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>
<script type="text/javascript">
$(document).ready(function(){
$("#form-data").submit(function(e){
var content = tinymce.get("mytextarea").getContent();
$(".leftContent").html(content);
return false;
});
jQuery.noConflict();
$('#leftFiftyModal').modal('hide');
});
</script>

Try:
<script type="text/javascript">
$(document).ready(function(){
$("#form-data").submit(function(e){
var content = tinymce.get("mytextarea").getContent();
$(".leftContent").html(content);
jQuery.noConflict();
$('#leftFiftyModal').modal('hide');
return false;
});
});
</script>

Related

Performance and Optimization - Too many bootstrap modals

I am building a table based on data returned from my API.
For each row in the table I would like to create a bootstrap modal with additional info in it.
This is how I do it right now. I created a designated div and I put all the modals inside it. Please note that in addition the modal's HTML is pretty big by itself:
let modal = `<div id="modal-${i}">big HTML here</div>`;
$("#modalsCollector").append(modal);
And this is how my table row looks like:
<tr data-toggle="modal" data-target="#modal-${i}">
Because I sometimes have 500+ table rows there is eventually a huge div (#modalsCollector) full of same (by structure) modals. I feel that it affects page performance.
Is there a better, more elegant and performance optimized way to bind modals to table rows? Or in general, working with many hidden elements instead of pushing them into the DOM that way?
You can include only one "null" modal in your <body>, like this:
<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>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Then when you have to show the modal generate it using jQuery like this:
$("#button").click(function(e){
$("#myModal .modal-header").append(HTML for modal header here);
$("#myModal .modal-body").html(big HTML for modal body here);
$("#myModal").modal("show");
});
So, basically you change the modal header and the modal body of the same modal each time, with the needed information accordingly, without the need of like thousands of modals.
Bootstrap has a neat way of changing the components of the same modal. This is as long as you need the same modal just different content inside.
https://getbootstrap.com/docs/4.5/components/modal/#varying-modal-content
Here is an example:
HTML:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#mdo">Open modal for #mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#fta">Open modal for #fat</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
and jQuery:
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// Update the modal's content.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})

How to automatically open a popup-box modal only from an external URL

I would like to have a button when clicked opens up a modal form hosted on another server.
Say the button is on www.web.com/review
Then when you click a button, it opens the modal box on another server and domain www.example.com/modal.
I would like to have a button as below on server A on URL www.web.com/review;
<button type="button" class="btn btn-primary btn-lg btn-flat" data-toggle="modal" data-target="#review-box"> Write a review</button>
When clicked opens up the modal on another server B on URL www.example.com/modal.
<!-- Modal -->
<div class="modal fade" id="review-box" 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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Can this be done or is it far fetched?
From internal server you need to put script frm the button that point to the external link, if you want to hide the external address you can use iframe or point to the modal directly.
function ExternalLink() {
let url = 'https://www.externallink.com/;
window.open(url,"theFrame");
}
html
<container>
<button onClick=ExternalLink()></button>
<iframe class="embed-responsive-item" name="theFrame" src="#">
<div class="modal fade" id="myModal" role="dialog">
</iframe>
</container>

Bootstrap popup model not working on my webpage

The bootstrap popup is not showing up on my website. I have copied the popup code from the official Bootstrap website.
Here is the link to my website Link to webiste
The popup button is located before the footer credits.
Current condition :
Query Bootstrap Modal is not working
Below code is copy pasted from your give url http://home.india-market.online/
It is working properly in separate example
Solution:
You have footer, <footer class="footer-social-icon text-center section_padding_70 clearfix">
Some how there is z-index:-101; and position:fixed; in <footer>
You need to remove model outside from <footer> and apply directly before </body> tag ends.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">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 hope it will start working normally.
Old Code from website is :
The reason is that modal content is placed (nested) inside footer element. Move that modal div to body and modal will appear.

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!

Why does my remote modal not show .modal-header or footer?

Here is my modal code:
<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
Here is the javascript that relates to the modal:
$('#myModal').on('hidden', function () {
$(this).removeData('modal');
});
$("a[data-toggle=modal]").click(function (e) {
lv_target = $(this).attr('data-target')
lv_url = $(this).attr('href')
$(lv_target).load(lv_url)});
Here is my link code: 造
When I click on the link it shows up with all of the divs replaced instead of just the "modal-body" div. In other words, Modal header doesn't appear above the remote content.
Here is a jsfiddle. Disregard the content that loads. Just notice that the modal-header and modal-footer content doesn't show.
Here you are: http://jsfiddle.net/kulldox/W3TLJ/3/
The problem was here:
你
You should've remove the 'data-remote="true"' in the trigger element. First of all it's not a Boolean attribute. And second, documentation states that you should use either href or data-remote attributes, not both.
Also you were missing the closing "}" from the click.
You replace the content of whole modal, not modal's body.
$(lv_target).find('.modal-body').load(lv_url);

Categories

Resources