0
こんにちはイム攣縮の私の視聴者が私のストリームのために寄付することができます...HTMLページウィッヒに取り組んでポップアップの不透明度の問題
ユーザーがPayPalのをクリックすると、彼はPayPalにリダイレクトされると、彼はビザをクリックした場合、それが表示されます私は今持っている問題は、寄付ammountがなかれポップアップと同じ不透明度を有していることであるポップアップ
....
は、誰かが、問題は何ができるか知っていましたか？
私のindex.php：
<html>
<head>
\t <meta charset="utf-8">
\t <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
\t
\t <!-- META -->
\t <meta name="description" content="RyuZockt.at StreamDonations" />
\t <meta name="keywords" content="stream, livestream, ryuzockt, donation, spende, support" />
\t <meta name="author" content="RyuZockt">
\t <meta name="revisit-after" content="3 days" />
\t
\t <title> RyuZockt.at Donations</title>
\t
\t <link rel="icon" type="image/png" href="/assets/img/favicon.png" />
\t
\t <!-- Google Fonts -->
\t <link href="http://fonts.googleapis.com/css?family=Comfortaa:400,700" rel="stylesheet" type="text/css">
\t
\t <!-- STYLE -->
\t
\t \t <!-- Bootstrap core CSS -->
\t \t <link rel="stylesheet" href="assets/css/bootstrap.css">
\t \t
\t \t <!-- Font Awesome 4.1.0 -->
\t \t <link href="assets/font-awesome/css/font-awesome.min.css" rel="stylesheet">
\t \t
\t \t <!-- Theme -->
\t \t <link href="assets/css/style.css" rel="stylesheet">
\t \t <link href="assets/css/popup.css" rel="stylesheet">
\t \t
\t <!-- /STYLE -->
</head>
<body oncontextmenu="return false;" style="background-image: url(assets/img/bg.jpg);">
\t <!-- Modal PopUp-->
\t <div id="myModal" class="modal">
\t <!-- Modal Content -->
\t <div class="modal-content">
\t \t <span class="close"><i class="fa fa-times" aria-hidden="true"></i></span>
\t \t <p><strong>Diese Zahlungsmethode ist momentan noch nicht verfügbar <img src="assets/img/sad.png"></strong></p>
\t </div>
\t </div>
\t <div class="col-md-12">
\t \t <div class="container-md">
\t \t \t <div class="panel cart panel-default">
\t \t \t \t <div class="panel-heading text-center">
\t \t \t \t \t <img class="avatar" src="assets/img/ryu.jpg">
\t \t \t \t \t <h1>RyuZockt</h1>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t <div class="panel-body cart-form">
\t \t \t \t \t <form method="post" enctype="multipart/form-data" action="startDonation.php">
\t \t \t \t \t \t <!-- Name und Betrag -->
\t \t \t \t \t \t <div class="row">
\t \t \t \t \t \t \t <!-- Name -->
\t \t \t \t \t \t \t <div class="col-md-6">
\t \t \t \t \t \t \t \t <div class="form-group">
\t \t \t \t \t \t \t \t \t <input type="text" name="name" required="required" class="form-control" placeholder="Benutzername">
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t <!-- Betrag -->
\t \t \t \t \t \t \t <div class="col-md-6">
\t \t \t \t \t \t \t \t <div class="form-group">
\t \t \t \t \t \t \t \t \t <div class="input-group">
\t \t \t \t \t \t \t \t \t \t <input type="text" name="betrag" required="required" class="form-control" placeholder="Betrag (frei wählbar)" value="5">
\t \t \t \t \t \t \t \t \t \t <span class="input-group-addon" id="basic-addon2"><i class="fa fa-eur fa-lg" aria-hidden="true"></i></span>
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <!-- /Name und Betrag -->
\t \t \t \t \t \t
\t \t \t \t \t \t <!-- Nachricht -->
\t \t \t \t \t \t <div class="row">
\t \t \t \t \t \t \t <div class="col-md-12">
\t \t \t \t \t \t \t \t <div class="form-group">
\t \t \t \t \t \t \t \t \t <textarea rows="8" maxlength="50" type="text" name="msg" class="form-control" placeholder="Nachricht an RyuZockt (max. 50 Zeichen)"></textarea>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <!-- /Nachricht -->
\t \t \t \t \t \t
\t \t \t \t \t \t <!-- Spacer -->
\t \t \t \t \t \t <div class="labelled-separator">
\t \t \t \t \t \t \t <div class="label-wrapper">
\t \t \t \t \t \t \t \t <label class="required"> Donaten mit</label>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <!-- /Spacer -->
\t \t \t \t \t \t
\t \t \t \t \t \t <!-- Pay Buttons -->
\t \t \t \t \t \t <div class="row small-gap">
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t <!-- PayPal -->
\t \t \t \t \t \t \t <div class="col-md-6 col-xs-6 payment-mean payment-paypal">
\t \t \t \t \t \t \t \t <div class="form-group">
\t \t \t \t \t \t \t \t \t <button type="submit" style="width: 100%;" name="paypal" required="required" class="btn btn-default btn-bump btn-paypal" value="PAYPAL">PayPal</button>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t <!-- /PayPal -->
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t <!-- Sofort -->
\t \t \t \t \t \t \t <div class="col-md-6 col-xs-6 payment-mean payment-mangopay">
\t \t \t \t \t \t \t \t <div class="form-group">
\t \t \t \t \t \t \t \t \t <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>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t <!-- /Sofort -->
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t <!-- Paysafe Card -->
\t \t \t \t \t \t \t <div class="col-md-6 col-xs-6 payment-mean payment-mangopay">
\t \t \t \t \t \t \t \t <div class="form-group">
\t \t \t \t \t \t \t \t \t <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>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t <!-- /Paysafe Card -->
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t <!-- Visa-Mastercard -->
\t \t \t \t \t \t \t <div class="col-md-6 col-xs-6 payment-mean payment-mangopay">
\t \t \t \t \t \t \t \t <div class="form-group">
\t \t \t \t \t \t \t \t \t <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>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t <!-- /Visa-Mastercard -->
\t \t \t \t \t \t \t
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <!-- /Pay Buttons -->
\t \t \t \t \t \t
\t \t \t \t \t </form>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t
\t \t \t </div>
\t \t </div>
\t </div>
\t
\t <!-- Scripte -->
\t <script src="assets/js/modal-popup.js"></script>
</body>
</html>私のstyle.css：
style.cssにhtml, body{
\t min-height: 100%;
\t font-family: 'Comfortaa', 'sans-serif';
\t letter-spacing: -0.5px;
\t width: 100%;
}
h1{
\t font-family: 'Comfortaa', 'sans-serif';
\t letter-spacing: -0.5px;
\t font-size: 2.6rem;
\t word-break: break-word;
}
.div{
\t display: block;
}
.img{
\t vertical-align: middle;
}
.h1{
\t font-size: 2.6rem;
\t margin-top: 0;
\t margin-bottom: 20px;
}
.form{
\t display: block;
\t margin-top: 0em;
\t
}
.form-group{
\t margin-bottom: 15px;
}
.textarea{
\t border-top-left-radius: 2px;
\t border-top-right-radius: 2px;
\t border-bottom-left-radius: 0;
\t border-bottom-right-radius: 0;
\t padding: 6px 12px 6px 12px;
\t resize: none;
\t overflow: hidden;
\t border-bottom: 0;
}
.input-group{
\t position: relative;
\t display: table;
\t border-collapse: separate;
\t font-family:
}
.input-group-addon{
\t border-radius: 0;
\t background-color: #f9f9f9;
\t padding: 6px 12px;
\t font-size: 14px;
\t font-weight: normal;
\t line-height: 1;
\t color: #555555;
\t text-align: center;
\t border: 1px solid #ccc;
\t width: 1%;
\t white-space: nowrap;
\t vertical-align: middle;
\t display: table-cell;
\t box-sizing: border-box;
}
.cart-body .form-control{
\t font-size: 1.8rem;
\t line-height: 3rem;
\t min-height: 45px;
}
.form-control{
\t display: block;
\t width: 100%;
\t padding: 6px 12px;
\t color: #555555;
\t background-color: #FFF;
\t border: 1px solid #ccc;
\t border-radius: 2px;
\t height: 40px;
\t border-width: 1px;
}
textarea {
resize: none;
}
.row{
\t margin-left: -15px;
\t margin-right: -15px;
}
.cart{
\t position: relative;
\t margin-top: 100px;
\t border: none;
\t box-shadow: none;
}
.panel{
\t margin-bottom: 20px;
\t background-color: #FFF;
\t border: 1px solid transparent;
\t border-radius: 2px;
}
.cart .avatar{
\t margin-top: -60px;
\t width: 100px;
\t height: 100px;
\t border-radius: 50%;
\t border: 2px solid #FFF;
}
.cart-body .panel-body{
\t padding: 20px;
\t background-color: #FFF;
\t box-sizing: border-box;
}
.col-md-12{
\t width: 100%;
\t position: relative;
\t min-height: 1px;
\t padding-left: 15px;
\t padding-right: 15px;
\t float: left;
}
.container-md{
\t width: auto;
\t margin-right: auto;
\t margin-left: auto;
\t padding-left: 15px;
\t padding-right: 15px;
\t box-sizing: border-box;
\t max-width: 500px;
}
.labelled-separator{
\t border-top: 1px solid #ccc;
\t margin-bottom: 20px;
\t margin-top: 40px;
\t position: relative;
}
.labelled-separator .label-wrapper{
\t position: absolute;
\t top: -13px;
\t width: 100%;
\t text-align: center;
}
.cart-body .labelled-separator label{
\t background-color: #f4f4f4;
}
.labelled-separator label{
\t display: inline-block;
\t padding: 0 10px;
\t background: #fff;
}
label{
\t font-size: 10px;
\t font-family: sans-serif;
\t color: #777788;
\t text-transform: uppercase;
\t max-width: 100%;
\t margin-bottom: 5px;
\t font-weight: bold;
}
.row.small-gap{
\t margin-left: -3px;
\t 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{
\t line-height: 3rem;
\t box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
\t border-width: 2px;
}
.btn-paypal{
\t text-indent: -9999px;
\t color: #333333;
\t border-color: #cccccc;
\t background: url(http://ryuzockt.at/donate/assets/img/paypal.png) no-repeat 50% 50%;
\t background-size: auto 60%;
}
.btn-mangopay-sofort{
\t text-indent: -9999px;
\t color: #333333;
\t border-color: #cccccc;
\t background: url(http://ryuzockt.at/donate/assets/img/mangopay-sofort.png) no-repeat 50% 50%;
\t background-size: auto 60%;
}
.btn-mangopay-psc{
\t text-indent: -9999px;
\t color: #333333;
\t border-color: #cccccc;
\t background: url(http://ryuzockt.at/donate/assets/img/mangopay-psc.png) no-repeat 50% 50%;
\t background-size: auto 60%;
}
.btn-mangopay-visa{
\t text-indent: -9999px;
\t color: #333333;
\t border-color: #cccccc;
\t background: url(http://ryuzockt.at/donate/assets/img/mangopay-visa.png) no-repeat 50% 50%;
\t background-size: auto 60%;
}と少なくとも 私のポップアップ
/* Modal PopUp */
\t .modal {
\t \t display: none; /* Hidden by default */
\t \t position: fixed; /* Stay in place */
\t \t z-index: 1; /* Sit on top */
\t \t padding-top: 100px; /* Location of the box */
\t \t left: 0;
\t \t top: 0;
\t \t width: 100%; /* Full width */
\t \t height: 100%; /* Full height */
\t \t overflow: auto; /* Enable scroll if needed */
\t \t background-color: rgb(0,0,0); /* Fallback color */
\t \t background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
\t }
\t /* Modal Content */
\t .modal-content {
\t \t background-color: #fefefe;
\t \t margin: auto;
\t \t padding: 20px;
\t \t border: 1px solid #888;
\t \t width: 45%;
\t \t text-align: center;
\t }
\t /* The Close Button */
\t .close {
\t \t float: right;
\t \t font-size: 20px;
\t \t font-weight: bold;
\t }
\t .close:hover,
\t .close:focus {
\t \t color: #000;
\t \t text-decoration: none;
\t \t cursor: pointer;
\t }
あなたはこちらのページのプレビューを見つけることができます。http://ryuzockt.at/donate/ –
こんにちは龍を、 '.inputグループ.FORM制御しようと{Zインデックス：！0を重要}'あなたのCSSで。あなたのモーダルはz-index：1ですが、入力量はz-index 2です。あるいは、 '.modal {z-index：3}'を増やしてその入力のオンタップを上げることができます。 –
ありがとうございましたKimは今問題なく動作します –