Can multiple print buttons in different modals be connected to individual divs within their respective modals?

I am currently developing a webpage using the Foundation 5 framework that features a table of information. Each row in the table contains a link that, when clicked, opens a specific modal displaying detailed information related to that row. I want to add a "print this information" button within each modal. Here is an example of my code:

<div id="detailModal1">
   <a href="javascript:window.print()" class="button"></i>Print Modal 1 Info</a>
   <div id="printableInfo1">Modal 1 information here</div>
</div>


<div id="detailModal2">
   <a href="javascript:window.print()" class="button"></i>Print Modal 2 Info</a>
   <div id="printableInfo2">Modal 2 information here</div>
</div>

<div id="detailModal3">
   <a href="javascript:window.print()" class="button"></i>Print Modal 3 Info</a>
   <div id="printableInfo2">Modal 3 information here</div>
</div>

If you have any suggestions or solutions, feel free to share them. Thank you for your assistance!

javascriptjqueryhtmlcsszurb-foundation

Answer №1

To control what appears on the printed page, utilize the @media print CSS query selector.

For example, in the code snippet below, all elements are hidden by default on the printed page. However, a class called print-content is applied when a user clicks a button.

<script type="text/javascript" src="https://code.jquery.com/jquery-git2.min.js></script>

<style>
    @media print {
        html body * {
            display: none;
         }
        .print-content {
            display: block !important;
        }
        .print-content * {
            display: block !important;
        }
    }
</style>


<div id="detailModal1">
    <a href="#" class="button print-button"></i>Print Modal 1 Info</a>
    <div id="printableInfo1">Modal 1 information here</div>
</div>
<div id="detailModal2" class="print">
    <a href="#" class="button print-button"></i>Print Modal 2 Info</a>
    <div id="printableInfo2">Modal 2 information here</div>
</div>
<div id="detailModal3">
    <a href="#" class="button print-button"></i>Print Modal 3 Info</a>
    <div id="printableInfo2">Modal 3 information here</div>
</div>

<script>

    $('.print-button').click(function(e) {
        var printContainer = $(e.target).parent();
        printContainer.addClass('print-content')
        window.print()
        printContainer.removeClass('print-content')
    })

</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Looking to create applications for Android and iOS that can integrate with a module designed in Adobe Captivate

I have created an interactive e-learning module using Adobe Captivate, which has been published in both HTML5 and SWF formats. The module includes some interactive elements/actions that can be accessed by clicking on them. It works perfectly fine in a web ...

androidioshtmlflashadobe-captivate

Module or its corresponding type declarations not found in the specified location.ts(2307)

After creating my own npm package at https://www.npmjs.com/package/leon-theme?activeTab=code, I proceeded to set up a basic create-react-app project at https://github.com/leongaban/test-project. In the src/index.tsx file of my react app, I attempted to im ...

javascripttypescriptnpmnpm-package

Issue with Masonry.js implementation causing layout to not display correctly

Currently, I am working on a project using Laravel, VueJS, and the Masonry.js library to develop a dynamic gallery. However, I have encountered a peculiar issue. Here is a snippet of my VueJS template: <template lang="html"> <div id="uploads-g ...

javascriptlaravelvue.jsmasonry

Using both CASE and MATCH operators within an array in Neo4j's Cypher Query Language (

Using the code snippet below, I am attempting to retrieve all details related to user data where the checked value is either 1 or 0. I have noticed that 'WHERE flight.checked IN check' does not seem to be properly working. Is it appropriate to u ...

javascriptangularjsneo4j

Having trouble with JavaScript not functioning correctly within the Update Panel?

Does anyone know how to include JavaScript from a remote source inside an update panel? I'm trying to add Facebook and Twitter share buttons to my application. Here is the code snippet: The problem is that this code works fine when the page is initia ...

javascriptasp.netajax

Including a Script Tag in an Angular 2 Application with a Source Attribute retrieved from a Web API Request

Situation: Within my Angular 2+ application, I am utilizing a web API to retrieve URLs for script tags created by a function called loadScript during the AfterViewInit lifecycle hook. The web API is providing the expected JsonResult data, which I have suc ...

htmlangularasp.net-web-api

I aim to conceal the Spinner feature within the service layer of Vue JS

I have a basic bootstrap Spinner.vue component <template> <div class="modal" v-if="start"> <div class="spinner-border text-info" role="status" style="width: 3rem; height: 3rem;" ...

javascriptvue.js

Error message: jQuery expression not being detected

Here is some html code that I have in my view: <div id="divLoginName" style="display: none"> <input type="hidden" id="hidLoginName" /> @Html.TextBox("txtEditLoginName", null, new { maxlength = "1000", tabindex = "0", Multiline ...

javascriptjqueryasp.net-mvc-4

Using both Promise based architecture and events in Node.js can lead to unexpected behavior and should be avoided

Currently, I am developing a nodejs application that is expected to grow in size. Despite my efforts, I have not been able to find many resources on advanced Nodejs project architecture and structure. I am wondering if it would be considered bad practice ...

javascriptnode.jseventsarchitecture

Is it possible to stop and start the animation in jQuery?

Currently utilizing jquery for object animation. Searching for a method to halt animation on mouseover and continue once the mouse moves away. Is there a way to achieve this functionality? ...

jqueryjquery-animate

javascriptDiscover the location of the central point within a polygon

I have stumbled upon a helpful resource that explains how to discover the central point of a polygon (and here in JavaScript): If you want to see a real-life example, check out this jsfiddle demo. Let's work with this specific polygon: var polygon ...

javascriptprototypecanvas

renewing a div element without the need to reload the entire webpage

I'm currently developing a setup process for configuring a database. My goal is to allow the user to progress through each phase without having to refresh the page. However, I've encountered an issue while trying to implement the .load() function ...

phpjavascriptjqueryajaxrefresh

Utilizing Stored Variables and Random Numbers in Selenium IDE

Can you explain how Selenium IDE handles stored variables (stored text) and random numbers? I've been trying to combine the two without much success. For example: <td>type<td> <td>css=input.some-text</td> <td>javascript ...

javascriptvariablesseleniumrandomselenium-ide

What is the best way to bring up the keyboard on an iPhone when focusing an HTML text field?

Currently working on developing a web app for iPhone, and looking to implement a feature where a text field is automatically focused upon page load, prompting the keyboard to appear. Despite attempting the standard Javascript method: input.focus(); I see ...

javascriptiphonehtml

How to Extract a Link from JSON Data in React Native

My JSON data is formatted like this: orderData:"<p>Key VVV: 6326233</p> <p>Download link <a title=\"Movie\" href=\"https://play.google.com/store/movies/details/The_Angry_Birds_Movie_2?id=O_RbjOHHpIs&hl=en\" t ...

javascriptjsonreactjsreact-native

Ensure that grid rows occupy the least amount of space possible

I'm relatively new to grid layout and I've encountered a challenge that has me stuck. Here's what I have so far: codepen And this is the relevant part of the grid: grid-template: 'img date' 'img head' 'img s ...

htmlcsscss-grid

The server appears to be active, but there is a lack of content rendering when using React, Node

When I attempt to run the code in app.jsx, nothing displays even though the index.html is functioning properly. Code from Server.js: var express = require('express'); server.js page var app = express(); app.use(express.static('public' ...

javascriptreactjsexpressbabeljs

Enlarge the div with a click

I was looking for a solution on how to make a div expand when clicked using jQuery I came across a tutorial that seemed simple and perfect, but I couldn't get it to work when I tried to replicate the code. Do you know if this code is still valid wit ...

javascriptjquerycssonclick

decipher the string using various operators

Is it possible to explode a string using different operators? I am trying to extract every code (of varying sizes) between the brackets [ and ] Here are some examples of the different possibilities: const codes = [ '[5018902847][592][50189272809] ...

javascriptarraysstringalgorithm

Implementing an Onclick function in HTML

I have an HTML code and I am looking to add an onclick event for a button named GET DATA. When the button is clicked, I want to send data for userId and categoryId to a PHP file. Can someone help me implement this functionality in my existing code? Here ...

javascripthtmlajax