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

Asked

Viewed 650 times

2

I’m trying to make the impression of a bootstrap-modal which is called within a form with includebut I want to print ONLY the modal, can I do it 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 I can use here to select all page elements?

*{
 display:none;
}

The way it’s time for printing goes white...

css3 bootstrap-4
  • 2

    Your problem is that when you display:One in the father you must also display:One in the son, there is no way you can display:One in the father and keep the son with block, because everything inside the father will also be like None.... And even putting *:not(#modal-protocolo) {display:None} will not help

  • Thank you very much for the clarification my friend, I managed to solve using a plugin Jquery, with pure CSS was giving a lot of work... I’ll put the answer

  • Gabriel I got a solution for you only with CSS case interest...

3 answers

2

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

As stated in the comment the problem of *{ display:none; } is that when you give display:none in the father you must also give display:none in the son, there is no way you give display:none in the father and keep the son with block, because everything inside the father will also be like none.... And even putting :not(#modal-protocolo) {display:none} it won’t do any good...

Follow the code if you want to use it:

To test click on Executar as "Whole page" and after Ctrl+P and you will see that the forms do not appear on the page, only the modal.

<!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>
	<script src="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>
	<script src="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.

inserir a descrição da imagem aqui

  • A good way to solve, however my DOM is very large, the modal would be centered on the page and with small content... I have tried to do something similar. Even so, thank you.

  • 1

    @Gabrielcarneiro yes, I imagined that for screens with a lot of content and a long scroll this problem could happen. But it leaves the tip there as a record, sometimes serves for those with similar problem, but in a different situation. Tmj

  • Thank you, hugs old man

1


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

To achieve this result you want, the structure must 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>

  • Your solution works with some adjustments, however I still stick with Jquery, I will accept your answer, because what I wanted was a solution with only CSS, hugs my friend...

1

Well, I could not solve using only CSS, parti pro uso of a Jquery plugin called printThis, which is easy to use and did not give me so much problem, follow 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: https://github.com/jasonday/printThis

Insert an empty Div right after main: 

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

</div>

And I set up the CSS like this: 

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

Browser other questions tagged css3 bootstrap-4

You are not signed in. Login or sign up in order to post.