php HTML弹出窗口不透明问题

gr8qqesn  于 2023-06-04  发布在  PHP
关注(0)|答案(2)|浏览(535)

我正在做一个页面，允许我的观众在抽搐捐赠我的流…
当一个用户点击贝宝，他被重定向到贝宝，如果他点击签证打开弹出窗口
我现在遇到的问题是，捐赠金额总是与弹出窗口具有相同的不透明度。

有人知道问题出在哪里吗？

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%;
}

/* 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;
}
<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>
php

2条答案

按热度按时间
q35jwt9p

q35jwt9p1#

看起来输入的z索引大于模态的z索引。我从代码中删除了这一行，捐赠金额与背景具有相同的不透明度。。
更改此样式：

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

对此：

.input-group .form-control{
    z-index: 0;
}
赞(0）分享  回复(0）举报  2023-06-04
rqenqsqc

rqenqsqc2#

正如另一个答案所提到的，问题是由于z索引。我不建议您更改或覆盖引导代码，只要您所做的不是100%安全。最好像这样增加你的模态的z索引。

.modal {
    /* your other properties */
    z-index: 10; /* Sit on top */
}
赞(0）分享  回复(0）举报  2023-06-04
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com