php - HTML Popup opacity issue -
hi im working on page wich allows viewers on twitch donate stream...
when user clicks on paypal gets redirected paypal , if clicks on visa opens popup
the problem have donation ammount alway has same opacity popup....
did knows problem be?
my index.php:
<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ü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ä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 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>my style.css:
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%; }and @ least popup style.css
/* modal popup */ .modal { display: none; /* hidden default */ position: fixed; /* stay in place */ z-index: 1; /* sit on top */ padding-top: 100px; /* location of 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; } /* close button */ .close { float: right; font-size: 20px; font-weight: bold; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; }
it looks z-index of input greater z-index of modal. removed line code , donation amount has same opacity background...
change styling:
.input-group .form-control{ z-index: 2; } to this:
.input-group .form-control{ z-index: 0; } 
Comments
Post a Comment