jQuery Girl
  1. jQuery Girl
  3. Comment imprimer Bootstrap Modal exactement comme affichage?
Intereting Posts
Animation de fichiers SVG chargés de l’extérieur avec le plug-in jQuery SVG de Keith Wood Supprimer les mots en excès d’une zone de texte Comment afficher le pourcentage avec le commutateur Kendo avec jQuery? Exécuter une fonction javascript / jquery pendant un certain temps, puis arrêter appliquer le même événement .click à deux divs différents comment effacer l’historique de hachage du navigateur en javascript jQuery – Cliquez sur LI, affichez / cachez UL – Cliquez sur LI: un href, continuez à afficher UL et ouvrez une fenêtre vierge. Jquery URL de chargement avec ajax Comment faire pour que la valeur soit entrée dans le champ de recherche Dans Datatables Boîte de dialog de confirmation de l’interface utilisateur jQuery et postback asp.net jQuery / javaScript – l’écouteur d’événements click / onclick ne fonctionne pas dans la boucle malgré la fermeture Comment obtenir une vidéo en plein écran sur jwplayer lors de l’utilisation de fancybox Pagination AJAX avec codeigniter et jquery animation fullpage.js avec onLeave et afterLoad Ajax dans asp page return 500

Comment imprimer Bootstrap Modal exactement comme affichage?

j’ai donc du mal à imprimer un modal avec son css. Je voulais imprimer une fenêtre modale exactement telle qu’elle était affichée à l’écran. J’ai utilisé la commande window.print () ou même javasript / jquery. mais le css n’est pas attaché. au lieu de cela, il n’imprime mon modal qu’à mi-parcours.

Donc, ce que je voulais, c’est cette image modale: Modal Example Image

Sera imprimé à window.print () comme ce qu’il a montré à l’écran. l’ensemble du bloc modal avec les bordures, etc., mais sans la page derrière.

codes que j’ai essayés: 

function printElement(elem) { var domClone = elem.cloneNode(true); var $printSection = document.getElementById("printSection"); if (!$printSection) { var $printSection = document.createElement("div"); $printSection.id = "printSection"; document.body.appendChild($printSection); } $printSection.innerHTML = ""; $printSection.appendChild(domClone); window.print(); }

Si quelqu’un répond à cela, merci!

vous pouvez utiliser @media print tag 

 @media print { model.class { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } // or you can add what ever you want css in print mood

tous les css de la balise d’impression @media s’appliqueront uniquement à l’impression, alors pour tester le style et vous assurer que le design répond aux besoins, vous pouvez utiliser l’ambiance d’impression dans Chrom Browser, vérifiez cette réponse.