html 模态弹出窗口

Posted 2021-05-10

/***************************************
MODAL POP-UP CONTACT FORM
***************************************/

.modal-window {
	position:absolute;
	top:0;
	right:0;
	bottom:none;
	left:0;
	background: rgba(30, 30, 30, 0.81);
	z-index:999;
	opacity:0;
	pointer-events:none;
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	transition:all 0.3s;
	text-align: left;
}
.modal-window:target {
	opacity:1;
	pointer-events:auto;
	height: 100%;
}
.modal-window>div {
	width: 100%;
	position:relative;
	margin:10% auto;
	background: white;
	color: $black;
	margin: 10% auto 30%;

	@include bp(568up) {width: 400px;}
	@include bp(768up) {width: 500px;}
}
.modal-window header {
	background-color:#f6fafa;
	font-weight:bold;
	border-bottom:1px solid #ebefef;
	color:#a8a8ae;
	padding:2rem;
}
.modal-close {
	background-color:$accent-color;
	line-height:50px;
	position:absolute;
	right:0;
	text-align:center;
	top:0;
	text-decoration:none;
	width: 48px;
	height: 48px;
	text-align: center;

}
.modal-close:hover {
	background-color: darken($accent-color, 7%);
}
.modal-content {
	line-height: 2em;
	padding: 3rem;
	font-size: 1.2em;
	min-height: 400px;
	
	a, a:hover, a:focus, p a {color: $accent-color;}

	@include bp(768up) {
		padding: 6rem 5rem 0;
		// font-size: 0.8em;
		min-height: 480px;
	}

	@include bp(1024up) {
		// font-size: 0.7em;
	}

	input,
	textarea {
		background: $light-gray;
		border: none;
		padding: 0.8em;
		margin-top: 0.8em;
	    width: 100%;
	}

	.wpcf7-submit {
	  font-size: 1.1em;
	  margin-top: 0.8em;
	  padding: 0.8em;
	  background-color: $accent-color; 
	  text-transform: uppercase;
	  color: white;

	  	&:hover {
	  		background-color: darken($accent-color, 7%);
	  	}
	}
}

// ends MODAL POP-UP CONTACT FORM

<!--Modal Popup-->

<!-- This link can be added to anywhere.  -->
<a href="#open-modal">Contact</a>

<div id="open-modal" class="modal-window">
	<div>
		<div class="modal-content">
			<a href="#modal-close" title="Close" class="modal-close"><img src="http://localhost:8888/xxxx/wp-content/uploads/2016/03/[e-mail]" width="48" height="48"></a>
			<div>
        <!--Content goes here.-->
			</div>
		</div>
	</div>
</div>