How To Create A Print Modal Using Javascript, Jquery Etc
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 coupl
Solution 1:
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(){
// variablesvar 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) --><divid="printable"><p>This is</p><p>printable</p></div><!-- Print link --><aid="printmodal"href="#">Print Me</a><!-- Modal div (intially hidden) --><divid="modal"><iframeid="printframe" /></div></body>jsfiddle: http://jsfiddle.net/tsdexter/ke2rqt97/
Post a Comment for "How To Create A Print Modal Using Javascript, Jquery Etc"