HTML弹出窗口不透明度问题

时间：2017-09-11 00:34:18

标签： php html paypal popup

嗨我在一个页面上工作，这让我的观众可以抽搐为我的流捐款......

当用户点击paypal时，他会被重定向到paypal，如果他点击签证则打开弹出窗口

我现在遇到的问题是，ammount的捐赠总是和弹出窗口一样不透明......

Popup screenshot

有人知道问题可能是什么吗？

我的index.php：

＆＃13;
＆＃13; 
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	
	<!-- META -->
	<meta name="description" content="RyuZockt.at StreamDonations" />
	<meta name="keywords" content="stream, livestream, ryuzockt, donation, spende, support" />
	<meta name="author" content="RyuZockt">
	<meta name="revisit-after" content="3 days" />
	
	<title> RyuZockt.at Donations</title>
	
	<link rel="icon" type="image/png" href="/assets/img/favicon.png" />
	
	<!-- Google Fonts -->
	<link href="http://fonts.googleapis.com/css?family=Comfortaa:400,700" rel="stylesheet" type="text/css">
	
	<!-- STYLE -->
	
		<!-- Bootstrap core CSS -->
		<link rel="stylesheet" href="assets/css/bootstrap.css">
		
		<!-- Font Awesome 4.1.0 -->
		<link href="assets/font-awesome/css/font-awesome.min.css" rel="stylesheet">
		
		<!-- Theme -->
		<link href="assets/css/style.css" rel="stylesheet">
		<link href="assets/css/popup.css" rel="stylesheet">
		
	<!-- /STYLE -->
</head>
<body oncontextmenu="return false;" style="background-image: url(assets/img/bg.jpg);">

	<!-- Modal PopUp-->
	<div id="myModal" class="modal">

	  <!-- Modal Content -->
	  <div class="modal-content">
		<span class="close"><i class="fa fa-times" aria-hidden="true"></i></span>
		<p><strong>Diese Zahlungsmethode ist momentan noch nicht verf&uuml;gbar <img src="assets/img/sad.png"></strong></p>
	  </div>

	</div>

	<div class="col-md-12">
		<div class="container-md">
			<div class="panel cart panel-default">
				<div class="panel-heading text-center">
					<img class="avatar" src="assets/img/ryu.jpg">
					<h1>RyuZockt</h1>
				</div>
				
				<div class="panel-body cart-form">
					<form method="post" enctype="multipart/form-data" action="startDonation.php">
						<!-- Name und Betrag -->
						<div class="row">
							<!-- Name -->
							<div class="col-md-6">
								<div class="form-group">
									<input type="text" name="name" required="required" class="form-control" placeholder="Benutzername">
								</div>
							</div>
							
							<!-- Betrag -->
							<div class="col-md-6">
								<div class="form-group">
									<div class="input-group">
										<input type="text" name="betrag" required="required" class="form-control" placeholder="Betrag (frei w&auml;hlbar)" value="5">
										<span class="input-group-addon" id="basic-addon2"><i class="fa fa-eur fa-lg" aria-hidden="true"></i></span>
									</div>
								</div>
							</div>
						</div>
						<!-- /Name und Betrag -->
						
						<!-- Nachricht -->
						<div class="row">
							<div class="col-md-12">
								<div class="form-group">
									<textarea rows="8" maxlength="50" type="text" name="msg" class="form-control" placeholder="Nachricht an RyuZockt (max. 50 Zeichen)"></textarea>
								</div>
							</div>
						</div>
						<!-- /Nachricht -->
						
						<!-- Spacer -->
						<div class="labelled-separator">
							<div class="label-wrapper">
								<label class="required"> Donaten mit</label>
							</div>
						</div>
						<!-- /Spacer -->
						
						<!-- Pay Buttons -->
						<div class="row small-gap">
							
							<!-- PayPal -->
							<div class="col-md-6 col-xs-6 payment-mean payment-paypal">
								<div class="form-group">
									<button type="submit" style="width: 100%;" name="paypal" required="required" class="btn btn-default btn-bump btn-paypal" value="PAYPAL">PayPal</button>
								</div>
							</div>
							<!-- /PayPal -->
							
							<!-- Sofort -->
							<div class="col-md-6 col-xs-6 payment-mean payment-mangopay">
								<div class="form-group">
									<button id="sofort" type="button" style="width: 100%;" name="mangopay-sofort" required="required" class="btn btn-default btn-bump btn-mangopay-sofort" value="MANGOPAY_SOFORT">MangoPay-Sofort</button>
								</div>
							</div>
							<!-- /Sofort -->
							
							<!-- Paysafe Card -->
							<div class="col-md-6 col-xs-6 payment-mean payment-mangopay">
								<div class="form-group">
									<button id="psc" type="button" style="width: 100%;" name="mangopay-psc" required="required" class="btn btn-default btn-bump btn-mangopay-psc" value="MANGOPAY_PSC">MangoPay-PSC</button>
								</div>
							</div>
							<!-- /Paysafe Card -->
							
							<!-- Visa-Mastercard -->
							<div class="col-md-6 col-xs-6 payment-mean payment-mangopay">
								<div class="form-group">
									<button id="visa" type="button" style="width: 100%;" name="mangopay-visa" required="required" class="btn btn-default btn-bump btn-mangopay-visa" value="MANGOPAY_VISA_MASTERCARD">MangoPay-Visa-Mastercard</button>
								</div>
							</div>
							<!-- /Visa-Mastercard -->
							
						</div>
						<!-- /Pay Buttons -->
						
					</form>
				</div>
				
				
			</div>
		</div>
	</div>

	
	<!-- Scripte -->
	<script src="assets/js/modal-popup.js"></script>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

我的style.css：

＆＃13;
＆＃13; 
html, body{
	min-height: 100%;
	font-family: 'Comfortaa', 'sans-serif';
	letter-spacing: -0.5px;
	width: 100%;
}

h1{
	font-family: 'Comfortaa', 'sans-serif';
	letter-spacing: -0.5px;
	font-size: 2.6rem;
	word-break: break-word;
}

.div{
	display: block;
}

.img{
	vertical-align: middle;
}

.h1{
	font-size: 2.6rem;
	margin-top: 0;
	margin-bottom: 20px;
}

.form{
	display: block;
	margin-top: 0em;
	
}

.form-group{
	margin-bottom: 15px;
}

.textarea{
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	padding: 6px 12px 6px 12px;
	resize: none;
	overflow: hidden;
	border-bottom: 0;
}

.input-group{
	position: relative;
	display: table;
	border-collapse: separate;
	font-family: 
}

.input-group-addon{
	border-radius: 0;
	background-color: #f9f9f9;
	padding: 6px 12px;
	font-size: 14px;
	font-weight: normal;
	line-height: 1;
	color: #555555;
	text-align: center;
	border: 1px solid #ccc;
	width: 1%;
	white-space: nowrap;
	vertical-align: middle;
	display: table-cell;
	box-sizing: border-box;
}

.cart-body .form-control{
	font-size: 1.8rem;
	line-height: 3rem;
	min-height: 45px;
}

.form-control{
	display: block;
	width: 100%;
	padding: 6px 12px;
	color: #555555;
	background-color: #FFF;
	border: 1px solid #ccc;
	border-radius: 2px;
	height: 40px;
	border-width: 1px;
}

textarea {
   resize: none;
}

.row{
	margin-left: -15px;
	margin-right: -15px;
}

.cart{
	position: relative;
	margin-top: 100px;
	border: none;
	box-shadow: none;
}

.panel{
	margin-bottom: 20px;
	background-color: #FFF;
	border: 1px solid transparent;
	border-radius: 2px;
}

.cart .avatar{
	margin-top: -60px;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	border: 2px solid #FFF;
}

.cart-body .panel-body{
	padding: 20px;
	background-color: #FFF;
	box-sizing: border-box;
}

.col-md-12{
	width: 100%;
	position: relative;
	min-height: 1px;
	padding-left: 15px;
	padding-right: 15px;
	float: left;
}

.container-md{
	width: auto;
	margin-right: auto;
	margin-left: auto;
	padding-left: 15px;
	padding-right: 15px;
	box-sizing: border-box;
	max-width: 500px;
}

.labelled-separator{
	border-top: 1px solid #ccc;
	margin-bottom: 20px;
	margin-top: 40px;
	position: relative;
}

.labelled-separator .label-wrapper{
	position: absolute;
	top: -13px;
	width: 100%;
	text-align: center;
}

.cart-body .labelled-separator label{
	background-color: #f4f4f4;
}

.labelled-separator label{
	display: inline-block;
	padding: 0 10px;
	background: #fff;
}

label{
	font-size: 10px;
	font-family: sans-serif;
	color: #777788;
	text-transform: uppercase;
	max-width: 100%;
	margin-bottom: 5px;
	font-weight: bold;
}

.row.small-gap{
	margin-left: -3px;
	margin-right: -3px;
}

.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 2px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.btn-bump{
	line-height: 3rem;
	box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
	border-width: 2px;
}

.btn-paypal{
	text-indent: -9999px;
	color: #333333;
	border-color: #cccccc;
	background: url(http://ryuzockt.at/donate/assets/img/paypal.png) no-repeat 50% 50%;
	background-size: auto 60%;
}

.btn-mangopay-sofort{
	text-indent: -9999px;
	color: #333333;
	border-color: #cccccc;
	background: url(http://ryuzockt.at/donate/assets/img/mangopay-sofort.png) no-repeat 50% 50%;
	background-size: auto 60%;
}

.btn-mangopay-psc{
	text-indent: -9999px;
	color: #333333;
	border-color: #cccccc;
	background: url(http://ryuzockt.at/donate/assets/img/mangopay-psc.png) no-repeat 50% 50%;
	background-size: auto 60%;
}

.btn-mangopay-visa{
	text-indent: -9999px;
	color: #333333;
	border-color: #cccccc;
	background: url(http://ryuzockt.at/donate/assets/img/mangopay-visa.png) no-repeat 50% 50%;
	background-size: auto 60%;
}
＆＃13;
＆＃13;
＆＃13;

至少 我的popup style.css

＆＃13;
＆＃13; 
/* Modal PopUp */
	.modal {
		display: none; /* Hidden by default */
		position: fixed; /* Stay in place */
		z-index: 1; /* Sit on top */
		padding-top: 100px; /* Location of the box */
		left: 0;
		top: 0;
		width: 100%; /* Full width */
		height: 100%; /* Full height */
		overflow: auto; /* Enable scroll if needed */
		background-color: rgb(0,0,0); /* Fallback color */
		background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	}

	/* Modal Content */
	.modal-content {
		background-color: #fefefe;
		margin: auto;
		padding: 20px;
		border: 1px solid #888;
		width: 45%;
		text-align: center;
	}

	/* The Close Button */
	.close {
		float: right;
		font-size: 20px;
		font-weight: bold;
	}

	.close:hover,
	.close:focus {
		color: #000;
		text-decoration: none;
		cursor: pointer;
	}
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

看起来输入的z-index大于模态的z-index。我从代码中删除了这一行，捐赠金额与背景相同;

更改此样式：

.input-group .form-control{
  z-index: 2;
}

到此：

.input-group .form-control{
    z-index: 0;
}

答案 1 :(得分：0)

如另一个答案所述，问题是由z-index引起的。我不建议您更改或一般覆盖引导代码，只要您不是100％安全的。最好只是增加模态的z-index。

.modal {
    /* your other properties */
    z-index: 10; /* Sit on top */
}
相关问题
最新问题