Menu
let say i have a print button on couple of pages and whenever user click . it will pop up the content in a modal and can print from there.Any idea will be appreciated.
I have couple of page with a print button . when user click it need to pul that content in a modal and than print from that modal.
1000
I can't write the code for you right now but I can put you on the right track..
You need to use jquery to get the contents you want to print (likely $('body').html();) then create your modal div popup and add an iframe into the modal div. Then add to the iframes body (via $('iframe').document.body.append();) the print content. Then, call print on the iframe ($('iframe').window.print;)
Let me know if this makes sense?
EDIT: Here is some example code working with what I believe you want. (make sure you include jquery before this javascript code)
<body>
<script>
$(document).ready(function(){
$('#printmodal').click(function(){
// variables
var contents = $('#printable').html();
var frame = $('#printframe')[0].contentWindow.document;
// show the modal div
$('#modal').css({'display':'block'});
// open the frame document and add the contents
frame.open();
frame.write(contents);
frame.close();
// print just the modal div
$('#printframe')[0].contentWindow.print();
});
});
</script>
<style>
#modal {
display: none;
width: 100px;
height: 100px;
margin: 0 auto;
position: relative;
top: 100px;
}
</style>
<!-- Printable div (or you can just use any element) -->
<div id="printable">
<p>This is</p>
<p>printable</p>
</div>
<!-- Print link -->
<a id="printmodal" href="#">Print Me</a>
<!-- Modal div (intially hidden) -->
<div id="modal">
<iframe id="printframe" />
</div>
</body>
jsfiddle: http://jsfiddle.net/tsdexter/ke2rqt97/
58
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
