JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.githubusercontent.com/RitsC/PrintArea/master/demo/jquery.PrintArea.js"></script>
<button id=btnImp >Impression</button>
<div class=divResult>
    <p>Bonjour ! </p>
</div>

<div class=myDialog style='display: none;'>
    <p>Etes vous sur ?</p>
</div>

CSS

/*
 * jQuery UI CSS Framework 1.8.12
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 */
 
 
 @media print {

        .myDialog{
			display :      none;
			border :       0 none;
			visibility: hidden;
        }
		
		.ui-dialog{
			display :      none;
			border :       0 none;
			visibility: hidden;
		}	
		
		.ui-widget-overlay{
			display :      none;
			border :       0 none;
			visibility: hidden;
		}
		
		.ui-widget-shadow{
			display :      none;
			border :       0 none;
			visibility: hidden;
		}
}
 

/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }


/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }


/* Icons
----------------------------------*/

/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/*
 * jQuery UI Button 1.8.12
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed...

JavaScript

$(function(){
    
$("#btnImp").click(function(){
			$( ".myDialog" ).dialog({
				title: "Confirmation impression",
				modal: true,
				autoOpen : false,
				draggable: false,
				closeOnEscape: true,
				resizable : false,
				buttons: 
				[
					{
						text: "Continuer",
						click: function() {
							imprimer();
							$(this).dialog("close");
						}
					},
					{
						text: "Annuler",
						click: function() {
							$(this).dialog("close");
						}
					}
				],
				open: function() {
					$( ".ui-dialog" ).css("visibility", "");
					$( ".ui-dialog" ).position({
						my: "center",
						at: "center",
						of: "body"
					});
					$(".ui-widget-overlay").css("background", "#aaaaaa").css("opacity", ".3").css("width", "105%").css("height", "100%");
				},
				close: function() {
					$( ".ui-dialog" ).css("visibility", "hidden");
					$(".ui-widget-overlay").css({background: '', opacity: ''});
				}    
			}).dialog('open');
		});

$("body").on("click",".ui-widget-overlay",function() {
			 $('.myDialog').dialog( "close" );
		});
});

function imprimer(){
	   $(".divResult").printArea( {} );
	}