help with modal window in css so that it appears in front of the whole window and not behind?

Question

help with modal window in css so that it appears in front of the whole window and not behind?

Navigation

#1 by (1 votes)

1

I need help so copy a modal window code for html and css, and the problem that I have is that the window appears behind me

As you can see when I click on the privacy policy, the modal window opens, but it comes out behind everything. How do I make it appear on the front? Here I put my css code to have it corrected and I also put the html

a.open{
	background-color: #414141;
	border-radius: 5px;
	color: #fff;
	font-size: 1.5em;
	margin: 20px;
	padding: 10px 20px;
	position: absolute;
	text-decoration: none;
	text-shadow: 2px 2px 0px #000;
	

}


section.modalDialog{
	background-color: white;
	bottom: 0;
	top:0;
	left: 0;
	right: 0;
	opacity: 0;
	position: fixed;
	z-index: -2;
}

section.modalDialog:target{
	opacity: 1;
}

a.close{
	background-color: #414141;
	border-radius: 5px;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	line-height: 22px;
	position: absolute;
	right: 5px;
	top:5px;
	text-align: center;
	text-decoration: none;
	width: 28px;
}

a.close{
	background-color: #000;
}

section.modal{
	background-color: #111;
	box-shadow: 0px 0px 10px #000;
	border-radius: 5px;
	color: #fff;
	margin: 10% auto;
	padding: 20px;
	position: relative;
	width: 400px;
}

h2{
	color: #fff;
	font-size: 2em;
	margin-bottom: 10px;
}

p{
	color: #fff;
	font-size: 1.2em;
}

<header>
	

<div class="logotipo"><img src="imagenes/alex.bmp" width="70" alt="logotipo"> </div>
	<nav>
	<ul><li><a href="#">INICIO</a></li>
		<li><a href="#">ACERCA DE</a></li>
		<li><div class="contenedor">
			<a href="#openmodal" class="open"> politica de privacidad</a>
			<section id="openmodal" class="modalDialog">
				<section class="modal">
					<a href="#close" class="close"> X </a>
					<h2> politica de privacidad</h2>
					<p>Esta permitido compartir todo el contenido de este sitio, más no está permitido ...</p>
				</section>
			</section>
		</div></li>
		<li><a href="#">CONTACTO</a></li>
		<li><a target="_blank" href="https://www.youtube.com/channel/UCsYcSASeuWbHFBZJXy6SJEA?sub_confirmation=1">YOUTUBE</a></li>
	</ul>
			</nav>
		</header>

modal ventana

asked by Alexandra Loor 15.01.2018 в 20:35

source

1 answer

Multiple excel operations with Python Error integrating Redsys payment gateway using PHP API

score 1 · Accepted Answer

The problem is that having a% co_of negative% is shown behind the other elements.

The z-index property marks what elements are displayed in front and which are displayed behind. The ones with the highest value are shown above, and the ones with the lowest value are shown behind. By default, they all have value z-index , so when giving a negative value you are indicating that it is shown ahead.

The problem is that if you put it forward you will not be able to interact with the screen, because you do not really hide the dialogue, what you are doing is to give it a 0 , that is, to make it transparent.

You'd better hide it with a opacity: 0 and show it with display: none instead of playing with the property display: block :

a.open{
	background-color: #414141;
	border-radius: 5px;
	color: #fff;
	font-size: 1.5em;
	margin: 20px;
	padding: 10px 20px;
	position: absolute;
	text-decoration: none;
	text-shadow: 2px 2px 0px #000;
	

}


section.modalDialog{
	background-color: white;
	bottom: 0;
	top:0;
	left: 0;
	right: 0;
	position: fixed;
  display: none;
	z-index: 2;
}

section.modalDialog:target{
	display: block;
}

a.close{
	background-color: #414141;
	border-radius: 5px;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	line-height: 22px;
	position: absolute;
	right: 5px;
	top:5px;
	text-align: center;
	text-decoration: none;
	width: 28px;
}

a.close{
	background-color: #000;
}

section.modal{
	background-color: #111;
	box-shadow: 0px 0px 10px #000;
	border-radius: 5px;
	color: #fff;
	margin: 10% auto;
	padding: 20px;
	position: relative;
	width: 400px;
}

h2{
	color: #fff;
	font-size: 2em;
	margin-bottom: 10px;
}

p{
	color: #fff;
	font-size: 1.2em;
}

<div class="logotipo"><img src="imagenes/alex.bmp" width="70" alt="logotipo"> </div>
	<nav>
	<ul><li><a href="#">INICIO</a></li>
		<li><a href="#">ACERCA DE</a></li>
		<li><div class="contenedor">
			<a href="#openmodal" class="open"> politica de privacidad</a>
			<section id="openmodal" class="modalDialog">
				<section class="modal">
					<a href="#close" class="close"> X </a>
					<h2> politica de privacidad</h2>
					<p>Esta permitido compartir todo el contenido de este sitio, más no está permitido ...</p>
				</section>
			</section>
		</div></li>
		<li><a href="#">CONTACTO</a></li>
		<li><a target="_blank" href="https://www.youtube.com/channel/UCsYcSASeuWbHFBZJXy6SJEA?sub_confirmation=1">YOUTUBE</a></li>
	</ul>
			</nav>
		</header>