0
Salut im travaillant sur une Wich page permet à mes téléspectateurs sur twitch de faire un don pour mon flux ...HTML problème d'opacité Popup
Lorsqu'un utilisateur clique sur paypal, il est redirigé vers paypal et s'il clique sur le visa, il ouvre le menu contextuel
le problème que j'ai maintenant que le don ammount a alway la même opacité que la fenêtre contextuelle ....
est-ce que quelqu'un sait ce que le problème pourrait être?
Mon 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>Mon 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%;
}et au moins mon pop-up 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 }
Vous pouvez trouver un aperçu de la page ici: http://ryuzockt.at/donate/ –
Salut Ryu, essayez '.form-contrôle du groupe .input {z-index: 0}' importante dans votre css. Parce que votre modal a z-index: 1, mais la quantité entrée a z-index 2, ou vous pouvez augmenter le '.modal {z-index: 3}' pour l'élever en haut de cette entrée. –
Merci Kim travaille maintenant sans problèmes –