Change the CSS Display property to ALL elements of a page and leave Block only for some?

Question

Change the CSS Display property to ALL elements of a page and leave Block only for some?

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (1 votes)

2

I am trying to print a bootstrap-modal that is called inside a Form with include but I want to print ONLY to modal, how can I do this using only CSS? See:

Modal:

<div class="modal fade" id="modal-protocolo" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true" data-backdrop="static" data-keyboard="false">
CONTEUDO DA MODAL...
</div>

CSS file:

@media print {
*{
 display:none;
}
/* MODAL PROTOCOLO */
#modal-protocolo{
 display: block;
}
}

What can I use here to select all page elements?

*{
 display:none;
}

The way it is at the time of printing is all white ...

css3 bootstrap-4

asked by anonymous 19.09.2018 / 13:43

3 answers

2

I have a solution for you with CSS only. It is a type of hake , but just put a box-shadow giant in its modal at the time of printing, that way it will cover everything that is behind, giving the impression that only has the modal in page.

As stated in the comment, the problem with *{ display:none; } is that when you go from display:none to parent you must be giving display:none to child, you can not give display:none to parent and keep child with block , because everything inside the tb father will be like none .... And even putting :not(#modal-protocolo) {display:none} will not work ...

Follow the code if you want to use it:

To test click% with% as "All page" and then Executar and you will see that the formes do not appear on the page, just Ctrl+P .

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Page Title</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>

@media print {
	.modal.fade.show {
		box-shadow: 0 0 0 3000px #fff;
		position: fixed;
	}
}
</style>
</head>
<body>
	
	<div class="container m-5">
		<div class="row">
			<div class="col-12">
				<form>
					<div class="form-group">
						<label for="exampleInputEmail1">Email address</label>
						<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
						<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
					</div>
					<div class="form-group">
						<label for="exampleInputPassword1">Password</label>
						<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
					</div>
					<div class="form-check">
						<input type="checkbox" class="form-check-input" id="exampleCheck1">
						<label class="form-check-label" for="exampleCheck1">Check me out</label>
					</div>
					<button type="submit" class="btn btn-primary">Submit</button>
				</form>
			</div>
		</div>
	</div>
	<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>

<div class="container m-5">
		<div class="row">
			<div class="col-12">
				<form>
					<div class="form-group">
						<label for="exampleInputEmail1">Email address</label>
						<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
						<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
					</div>
					<div class="form-group">
						<label for="exampleInputPassword1">Password</label>
						<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
					</div>
					<div class="form-check">
						<input type="checkbox" class="form-check-input" id="exampleCheck1">
						<label class="form-check-label" for="exampleCheck1">Check me out</label>
					</div>
					<button type="submit" class="btn btn-primary">Submit</button>
				</form>
			</div>
		</div>
	</div>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
	<div class="modal-content">
	<div class="modal-header">
		<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
		<button type="button" class="close" data-dismiss="modal" aria-label="Close">
		<span aria-hidden="true">&times;</span>
		</button>
	</div>
	<div class="modal-body">
		...
	</div>
	<div class="modal-footer">
		<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
		<button type="button" class="btn btn-primary">Save changes</button>
	</div>
	</div>
</div>
</div>

	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>

An image with the result at print time.

19.09.2018 / 14:43

1

Well, I could not solve using CSS only, I decided to use a Jquery Plugin called printThis, which is easy to use and did not give me so much trouble, more information ...:

$('#imprime-protocolo').click(function(){
    $(".imprimivel").html($("#modal-protocolo").html());
    $(".imprimivel #imprime-protocolo").remove();
    $(".imprimivel .fecha-modal-protocolo").remove();
    $(".imprimivel").printThis();
});

Plugin Available in: link

I inserted an empty Div shortly after the main:

</main>
<div class="imprimivel">

</div>

And I configured CSS like this:

.imprimivel {
    display: none;
}
/* print styles*/
@media print {
    .imprimivel {
        display: block;
    }
}

19.09.2018 / 14:40

Dynamic table with angle Notification of a date for another R

score 1 · Accepted Answer

The problem is that the * selector selects ALL HTML elements (DOM), including the HTML and BODY tags. So if you hide, for example, BODY with display: none , any tag within BODY will be hidden.

To achieve this result you want, the structure should follow the example:

body > * {
  display:none;
}
/* MODAL PROTOCOLO */
#modal-protocolo{
  display: block;
}

<!DOCTYPE html>
<html>
<head>
  <title>Teste</title>
<body>
  <header>
    <h1>Título de exemplo</h1>
  </header>
  
  <main>
    <p>Conteúdo de exemplo</p>
  </main>

  <div class="modal fade" id="modal-protocolo" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true" data-backdrop="static" data-keyboard="false">
  CONTEUDO DA MODAL...
  </div>
</body>
</html>