Just now I am working on print function using JavaScript to print the content of my website. I can print the content of my site fine with just a direct content. But the problem is that printing the content with bootstrap modal popup seems to be different from what I have done. Below is the printing code of normal content I have implemented.
HTML:
<div id="printArea">
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="mSchedule" class="modal fade">
<div class="modal-dialog">
<div class="modal-content" style="width: 1000px;" >
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
<button type="button" id="printer" class="btn btn-info">Print</button>
<h4 class="modal-title">Repayment Schedule</h4>
</div>
<div class="modal-body" id ="schedule-table">
</div>
</div>
</div>
</div>
</div>
JS:
$(document).ready(function(){
$(document).on('click', '#printer', function (event) {
event.preventDefault();
var $print = $("#printArea");
$(document.body).wrapInner('<div style="display: none"></div>');
var $div = $('<div />').append($print.clone().contents()).appendTo(document.body);
window.print();
$div.remove();
$(document.body).children().contents().unwrap();
});
});
I know that this code is working fine with printing normal content, But I have no idea how to print a bootstrap popup modal.
Any help really appreciate.
Related
Bootstrap Modal does not load after page has been refreshed certain times.
After that, the modal will only show up when I open the page in incognito.
Does anyone have any fix for this bug?
You can go to the actual site to see for yourself: http://www.petalandco.com.au/
js:
jQuery(window).load(function(){
setTimeout(function(){
var hiddenmodal = getCookie('hiddenmodal');
if (hiddenmodal == "") {
jQuery('#popupNewsletterModal').modal('show');
}
}, 100);
HTML:
<!-- Modal -->
<div class="modal fade" id="popupNewsletterModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document" style="width:679px;height:439px;">
<div class="modal-content" style="<?php echo ($style);?>">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="background: rgba(0,0,0,0);top:0px;">
<span aria-hidden="true" style="color:#000;font-size:40px;">×</span>
</button>
<div class="modal-body">
<div class="widget popupnewsletter-widget heading__center">
The demo with the image loading when clicked on Modal button is here: http://www.bootply.com/7kS6Ube98u
I need to place the iframe instead of the image, but have no idea what code to change, so it loads the same way (i.e. when clicked on the Open Modal button)
Any help is appreciated.
You can simply change the html to use an iframe (without a src attribute), then change the references in the js to iframe to make it clearer. You can see it here
Below is an example of using vanilla JS with Bootstrap 5:
JS:
var modal = document.getElementById('modalId')
modal.addEventListener('show.bs.modal', function (event) {
var iframe = modal.querySelector('iframe');
iframe.src = iframe.getAttribute('data-src');
})
HTML:
<div class="modal modal-blur fade" id="modalId" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
Heading
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-0">
<iframe data-src="http://www.stackoverflow.com" class="w-100"></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I'm novice in web programming yet but I' m trying to learn :)
I want to hide a modal to show another modal("Please wait screen"),to wait for a function call to end (loadData()). But the first modal gets hidden and then the screen fades until function ends and only then the "Please Wait" modals appears.
Any help is welcome.
Ps: Sorry for my bad english...
HTML
First modal
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<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>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Modal 1</h4>
</div>
<div class="modal-body">
<button type="button" id= "btn1" class="btn btn-primary" data-target="#modal1">Click</button>
</div>
</div>
</div>
</div>
The second modal
<div class="modal fade bs-example-modal-sm" id="myPleaseWait" tabindex="-1" data-backdrop="static" data-keyboard="false" role="dialog" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
<span class="glyphicon glyphicon-time">
</span> Processing data...
</h4>
</div>
<div class="modal-body">
<div class="progress">
<div class="progress-bar progress-bar-info
progress-bar-striped active"
style="width: 100%">
</div>
</div>
</div>
</div>
</div>
</div>
Javascript
$('#btn1').click(function(e) {
e.preventDefault();
$('#modal1').modal('hide');
$("#myPleaseWait").modal("show");
loadData();
});
Bootstrap's modal class exposes a few events for hooking into modal functionality.
show.bs.modal
This event fires immediately when the show instance method is called.
shown.bs.modal
This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete).
hide.bs.modal
This event is fired immediately when the hide instance method has been called.
hidden.bs.modal
This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
loaded.bs.modal
This event is fired when the modal has loaded content using the remote option.
$('#btn1').click(function(e) {
e.preventDefault();
$('#modal1').modal('hide');
$('#modal1').on('hidden.bs.modal', function (e) {
$("#myPleaseWait").modal("show");
});
loadData();
});
For more details refer Bootstrap Documentation
Thanks #sri, with your explanation I could resolve it.
$('#btn1').click(function(e) {
e.preventDefault();
$('#modal1').modal('hide');
$("#myPleaseWait").modal("show");
$('#myPleaseWait').on('shown.bs.modal', function (e) {
loadData();
});
});
I have here the sample project that will get the value of the id of an attribute using ajax and then should show the modal using ajax.
The program that I've got is functioning well in terms of getting the id but my problem is the modal is not showing.
What I tested to know the problem is that I deleted the class="modal hide" in the modal and so the modal appeared below of the table and not in front of the whole page.
It just looked like another division under the table.
So now my problem is that the modal doesn't pop up. When the is clicked nothing happens if there is an attribute class="modal hide" of the modal, but if there is no attribute like that it is working there is a modal but it is not a pop up.
It is like another division under the table.
What's wrong with my code?
<a type="button" data-toggle="modal" id="11" class="push">Read more</a>
<script>
$(document).ready(function () {
$('.push').click(function () {
var res_id = $(this).attr('id');
$.ajax({
type: 'POST',
url: '../php-files/resolve.php', // in here you should put your query
data: 'post_id=' + res_id, // here you pass your id via ajax .
// in php you should use $_POST['post_id'] to get this value
success: function (r) {
// now you can show output in your modal
$('#mymodal').modal('show'); // put your modal id
$('.modal-body').show().html(r);
}
});
});
});
</script>
<!-- Modal -->
<div id="myModal" class="modal hide fade in" 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">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
In success function add this code
$('#id1').modal('show'); // you
$('#body').html(r);
Your model should be as below
<div class="modal" id="id1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
...
<div id="body" class="modal-body text-center">
<!-- loading modal.. -->
</div>
..
</div>
I am trying to .load() a bootstrap modal in my page and show it immediately. Below is the code I have written (which isn't working as the modal opens but can then never be closed)!
Basically I am trying to .load() a list of players in a modal when you click on a team name (with the class .team), I've tried various ways of calling $($this).empty() with no success.
Here is my function:
$(function () {
$('.team').on('click', function () {
var target = $(this).data('target');
$('#results-modals').load('/team-players.html ' + target, function (response, status, xhr) {
if (status === "success") {
$(target).modal({ show: true });
}
});
});
});
Here is the html anchor and example modal:
<a class='team' data-toggle='modal' data-target='#20'>Real Madrid</a>
Data held in external file team-players.html:
<div id='20' class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<p>Player 1: Ronaldo</p>
</div>
</div>
</div>
$(function(){
var url = "url of the modal window content";
$('.my-modal-cont').load(url,function(result){
$('#myModal').modal({show:true});
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Modal Window Container -->
<div class="my-modal-base">
<div class="my-modal-cont"></div>
</div>
<!-- Modal Window content -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>My modal content here…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Instead of $($this).modal({ show: true }); try $(this).modal('show');
To hide the modal, you can use $(this).modal('hide');
You can do $(this).modal("toggle") if it open it will close and vice versa.
jQuery .load() bootstrap modal and show
for show $(#ID).modal('show');
for hide $(#ID).modal('hide');