I am having a little drag and drop game, this game has a how-to-play button that opens a modal with text and guides with it, when I click to print( real-life print) I want to show only that one element nothing else. That's where I need your help.
I tried to do this with CSS:
@media print {
body {
visibility: hidden;
}
.modal-window {
visibility: visible;
}
}
Thought this would help but this shows me only a blank page,somehow I need to print only the my Modal.js element which has a div with a class of .modal-window.
If I open the modal (click to the howtoplay button) I get it right, but my task is to do this without clicking on that button.
Thanks
You're hiding body. Your modal window element is in body so it's hidden as well.
Try hiding everything in body except modal window
body *{
visibility:hidden;
}
body .modal-window {
visibility: visible;
}