I have a button on which I trigger opening bootstrap modal popup like following:
<a class="btn btn-app btnWatchlist" data-toggle="modal" data-target="#myModal" style="min-width:175px;margin:0;height:67px">
<i class="fa fa-save"></i> Add to Watchlist
</a>
The modal popup HTML is like following:
<!-- 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">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>
The Add to watchlist button is loaded into the DOM after a jQuery post to the server and when the server returns the HTML I simply update users DOM to display this button.
The issue here is that upon doing a jquery post I add a class which basically displays a shifting gear while the search is being performed and now when I press the button the modal is shown, but this "loading" class is loaded as well with on click of on the modal popup.
The code for making the loading class to appear is:
$body = $("body");
function StartLoading() {
$(document).on({
ajaxStart: function () { $body.addClass("loading"); }
});
}
function StopLoading() {
$(document).on({
ajaxStop: function () { $body.removeClass("loading"); }
});
}
Now how can I prevent mixing of these two while pressing the "Add to watchlist" button, so I can only display the modal and remove the loading class after the DOM is loaded??
P.S. So ultimately I don't wanna display the contents of the "loading" class upon clicking on the button to display the popup, just the modal popup itself ..
Not sure if I understand your question correctly, but you could create a variable that keeps track of whether the content of your modal has already been loaded and then wrap the statement $body.addClass("loading"); inside an if(modalHasNotBeenLoaded)?
Related
Bootstrap modal is closing when I click on "Ok" button showing from "alert()" function.
$("#expample").modal({
backdrop: 'static',
keyboard: false,
show: true
});
Below is my jquery:
$('.sendToUser').on('click', function (){
var selectedLyrics = $('#selectedLyricsInput').val();
if($("input[name='selectUserRadio']").is(":checked") == false){
alert('Please, select a user to send.');
return;
}
});
Although, hitting "Enter" or "Esc" on keyboard is working fine and also, clicking outside the modal; the modal is not closing which is fine.
Below is my html:
<div class="modal fade" id="userSelectionModal" tabindex="-1" role="dialog" aria-labelledby="userSelectionModal">
<div class="modal-dialog modal-likes" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Select User</h4>
</div>
<div class="modal-body">
<div style="margin-bottom: 50px;" id="populateUsers">
</div>
<input type="hidden" id="selectedLyricsInput" value="" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success sendToUser" data-dismiss="modal">Send</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
{{--<i class="fa fa-spinner fa-spin"></i>--}}
</div>
</div>
</div>
I am creating an alert popup from an event on the modal but when clicked on the "ok" of the alert() popup, it disappears.
How to prevent closing of the modal after clicking on "OK" on the alert popup?
Thanks
Your modal is closing, because you have data-dismiss="modal" attribute on the .sendToUser button. Removing this attribute should prevent the modal from closing.
You need to remove attribute data-dismiss="modal" at the .sendToUser element.
If you need to close modal, you just need to add the code:
$('#userSelectionModal').modal('hide')
use within your script
window.location = "..\path after validation"
also avoid data-dismiss="modal" in submit button
Simply instantiate a variable that's tied to the events firing within the modal window - to false, further set the variable to false when deemed necessary (e.g. to prevent closing the modal when the alert pops up), and then finally when the window should normally close, do a quick "if check" that assesses if the variable is finally true and if it is, fire off the functionality that lets the modal close. This ensures that the modal window will close only when you allow it.
As the title, how can I close the modal using the button in remote content?
Here is the original page, index.html:
open modal
<div id="testModal" class="modal fade">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
</div>
</div>
</div>
and here is the page I want to open in the modal, modal.html:
<p>Hi, I am a modal</p>
<button class="btn btn-primary">close</button>
<script type="text/javascript">
$(function() {
$("#closeModal").click(function() {
// do something...(Ajax)
$("#testModal").modal('hide');
});
});
</script>
and I want the close button to close the modal in index.html but not using data-dismiss. Here is the full example in Plunker:http://plnkr.co/edit/EGjtma?p=info
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
Do nothing with any function, dismiss modal is build-in on Boostrap
I've checked you're code, and I found that what the modal does is grapping the whole content of modal.html file and place it inside a div with class name "modal-content"
So that's very easy, you can write this code in the close button inside the modal.html file and this will allow you to close the modal
<button class="btn btn-primary" onclick="$('#testModal').hide()">close</button>
Also I've few notes for you
There are many scripts that you've added and I'm not sure that you needed
Your code contains some Javascript errors, so check the browser console to fix them
Don't duplicate JS / CSS includes in modal.html, If these files already exist in the main file no need to add them again.
I want to pass file Download URL to Bootstrap Modal when I click on link and then on Bootstrap Modal after filling some information like name,emailaddress when I click on footer button I want to download that file.How can I achieve this ?
I don't know if I'm right about your question, but you just simply make the button of the modal's footer to trigger the download function. See my sample demo of it.
EDIT
What I've understand about your question is when the user clicks the link, a modal will then appear and at the modal's footer was the direct download button. Note that on my demo, I made the modal just a prompt confirmation to the user.
HTML
<!-- Button that acts as a link and triggers the modal to open -->
<button class="btn btn-link" data-toggle="modal" data-target="#myModal">Download</button>
<!-- Prompt modal. Notice that this is just a confirmation for downloading the file -->
<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">Download</h4>
</div>
<div class="modal-body">
<p>Do you really want to download the file?</p>
</div>
<div class="modal-footer">
<!-- The download button -->
<a href="http://s1.picswalls.com/wallpapers/2014/08/08/scottish-landscape-hd_015751702_152.jpg" download>
<button type="button" class="btn btn-primary">DOWNLOAD</button>
</a>
<button type="button" class="btn btn-default" data-dismiss="modal">CLOSE</button>
</div>
</div>
</div>
</div>
Read this to know more about the download attribute.
There are many ways to do it. It basically depends on in what format you want to download. Some simple example to download it as .txt file is below.
HTML :
<textarea>some text here to downlaod</textarea>
<p>Export</p>
javascript :
var container = document.querySelector('textarea');
var anchor = document.querySelector('a');
anchor.onclick = function() {
anchor.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(container.value);
anchor.download = 'export.txt';
};
Like the title says i have problem to getting the modal.on('hidden') event to run. I can open the modal without any problems. The code im using for it looks something like this:
var info = $('<img src="img/icons/info.png">');
info.attr('data-toggle','modal');
info.attr('data-target','#infoPopup');
The modal itself looks like this:
<div class="modal fade" id="infoPopup" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 id="popupHeader" class="modal-title"></h4>
</div>
<div id="popupBody" class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
It Opens perfectly fine but it seems like the hidden event is not triggert when I'm closing it by clicking beside the modal the close button or the X on the top right.
$('.modal.in').on('hidden',function(){
console.log('test');
});
The selected modal is the correct one when i'm trying to access it on the console with $('.modal.in'). So i'm not trying to get a callback on the wrong modal. I also tried it with $('.modal.in').on('hidden.bs.modal',func...). But i got the same result.
Thanks for your help.
for bootstrap 3 you need to use hidden.bs.modal
$('.modal.in').on('hidden.bs.modal', function () {
// do something…
})
if your modal is not in DOM on load this should rather work
$(document).on('hidden.bs.modal','.modal.in', function () {
// do something…
})
Instead of using .modal.in use the id of the modal that you want to fire the event with. If you want to use it for all modals just use .modal and not .modal.in and you will use on hidden.bs.modal
here is a fiddle Fiddle
$('#infoPopup').on('hidden.bs.modal',function(){
alert("Modal Closed");
});
I am looking for jQuery modal popup which should display image like sample check to show routing number etc,.. When I click on a Routing number(?)question mark it should pop-up an image and should have closing button on the top right corner. I have seen different approaches but couldnt find exact one
Check out the Bootstrap Modal. Click the Launch demo modal button.
In <head> make sure you include the javascript for jquery and bootstrap.js. You can download bootstrap.js from the bootstrap site. You also might want to include the bootstrap.css as well.
Once your <head> is all setup, in your body you need to add the modal code which will be hidden and you'll need to add a button to show the modal. The button and modal are linked together by id.
<!-- Button to trigger modal -->
Launch demo modal
<!-- Modal -->
<div id="myModal" class="modal hide fade" 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">×</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>