I have a printModal and a closeModal buttons on my bootstrap modal. The modal doesn't close after the print logic runs.
Step 1: Click on printModal after popup is loaded. (works fine).
Step 2: Close the browser print dialog (works fine, the print dialog closes and bootstrap modal is still visible).
Step 3: Click on closeModal (FAILs, modal doesn't close).
If I click on closeModal before I click on printModal, it works fine. It only doesn't work after printModal is executed first.
<div id="myModal" class="modal fade" role="dialog">
<div id="modalContent" class="modal-dialog modal-lg">
<div class="modal-content">
// more html
<div class"buttons">
<input type="submit" id="printButton" class="btn-lg" value="Print">
<input type="submit" id="closeButton" class="btn-lg" data-dismiss="modal" value="Close">
</div>
</div>
<script>
$('#myModal').on('click', 'input#printButton', function () {
var myCopy = document.body.innerHTML;
var printThis = document.getElementById("modalContent").innerHTML;
document.body.innerHTML = printThis;
window.print();
document.body.innerHTML = myCopy;
});
</script>
</div>
This is because you change the whole HTML code of your page and also the whole DOM with this code:
document.body.innerHTML = printThis;
The javascript functions that were bound to the DOM elements are now gone, so does the click event on your close button.
What you can do is to change the css for printing so only the modal content is visible.
Alternatively you can open a popup, add the modal content there, print it and close it afterwards. Example with a popup:
var printPopup = window.open('');
printPopup.document.write(printThis);
printPopup.document.write(/ add some css or include a css file/);
printPopup.print();
Note that popups are not good for user expirience, so you should try the css modification aproach first.
Try changing your input to button, as shown here.
So it'll look like this:
<div class"buttons">
<input type="submit" id="printButton" class="btn-lg" value="Print">
<button id="closeButton" class="btn-lg" data-dismiss="modal">Close</button>
</div>
Related
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)?
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.
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'm using bootstrap 3 modal.
Following is my code.
<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>Modal header</h3>
</div>
<div class="modal-body">
<iframe src="remote.html"></iframe>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
Now every thing works like it should except when the modal is triggered I am unable to hide the modal(even with the close button).
Howwever when I use the modal without iframe the modal functions perfectly.
This has been eating my time for sometime, it would be great if someone could help me figure this out.
From KayakDave's answer here: https://stackoverflow.com/a/20818030/2576805
2) Add some jquery that is triggered when the modal dialog button is clicked. The following code expects a link destination in a data-src attribute and for the button to have a class modalButton. And optionally you can specify data-width and data-height- otherwise they default to 400 and 300 respectively (of course you can easily change those).
The attributes are then set on the which causes the iframe to load the specified page.
$('a.modalButton').on('click', function(e) {
var src = $(this).attr('data-src');
var height = $(this).attr('data-height') || 300;
var width = $(this).attr('data-width') || 400;
$("#myModal iframe").attr({'src':src,
'height': height,
'width': width});
});
3) add the class and attributes to the modal dialog's anchor tag:
<a class="modalButton" data-toggle="modal" data-src="http://www.youtube.com/embed/Oc8sWN_jNF4?rel=0&wmode=transparent&fs=0" data-height=320 data-width=450 data-target="#myModal">Click me</a>
In the jsFiddle provided at the bottom of the answer, the modal is able to be opened and closed without issue.
I'm using the clean example code provided by zclip page:
$('a#copy-dynamic').zclip({
path:'js/ZeroClipboard.swf',
copy:function(){return $('input#dynamic').val();}
});
and this is the HTML:
Click here to copy the value of this input:
<input type="text" id="dynamic" value="Insert any text here." onfocus="if(this.value=='Insert any text here.'){this.value=''}" onblur="if(this.value==''){this.value='Insert any text here.'}">
It works fine if the HTML is inside the bootstrap main page, but it stops working if i move the html inside a bootstrap modal window (that is, inside the div element of the modal).
How can i get it work?
I had the same issue with zclip and bootstrap modals. The fix I applied was twofold:
Attach the zclip to the element inside the modal's 'show' function.
Add a 250ms delay before attaching the zclip to the element
This properly places the zclip within the modal. It also works if you have multiple tabs in the modal.
HTML
<div id="myModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<a class="btn" href="#" id="modal_body_button">Copy Undo Config To Clipboard</a>
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
JavaScript
$('#myModal').on('show', function () {
$("#modal_body_button").delay(250).queue(function(next){
$(this).zclip({
path: "/static/javascript/ZeroClipboard.swf",
copy: "copied text OK!"
});
next();
});
});
In example above can also use on('shown') instead of on('show') event which calls when modal completely showed. This helps to prevent using dirty hacks like delay(250)