0
Hallo im auf einer Seite weicht arbeitet meine Zuschauer auf Twitch ermöglicht meinen Stream zu spenden ...HTML-Popup-Opazität Ausgabe
Wenn ein Benutzer auf paypal klickt er zu PayPal weitergeleitet wird, und wenn er auf Visum klickt es öffnet das Popup
das Problem, das ich jetzt habe, ist, dass die Spende ammount alway die gleiche Opazität wie das Pop-up hat ....
hat jemand weiß, was das Problem sein könnte?
Meine 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>Mein 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%;
}und mindestens mein Popup style.css
/* 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 }
Sie hier eine Vorschau der Seite finden können: http://ryuzockt.at/donate/ –
Hallo Ryu, versuchen '.input-Gruppe .form-control {z-index: 0 wichtig}' in deinem css. Weil Ihr Modal den Z-Index hat: 1, aber die Menge der Eingabe hat den Z-Index 2, oder Sie können den '.modal {Z-Index: 3}' erhöhen, um ihn über diese Eingabe zu erhöhen. –
Danke Kim arbeitet jetzt ohne Probleme –