Question

1 popup此图显示按钮点击时出现的弹出窗口，即“分享”。我想删除该按钮，以便它不会出现在点击时打开的窗口上。Button`

<div class="view-list"> 
    <h3><b>Share</b></h3>

                    <div class="share-transcript">
                        <!--input type="text" name="email" class="form-control" placeholder="Share transcript(s) with "-->
                        <input type="button"  class="btn btn-primary otp-single-btn" data-toggle="modal" data-target=".bs-example-modal-sm" value="share">
                    </div>
</div>
 <h4 class="modal-title">OTP</h4>
      </div>
      <div class="form-block">
      <form name="frm_stuff">
      <div class="cehck-box-btn">
         <div class="checkbox">
                        <input id="checkbox1" name="stuff_type" class="styled" value="university" type="radio">
                        <label for="checkbox1">
                            University
                        </label>
                    </div>

                         <div class="checkbox">
                         <input type='hidden' name="login_email" id="login_email" value="<?php echo $user_mail_stuff; ?>" />
                        <input id="checkbox2" name="stuff_type" class="styled" value="corporate" type="radio">
                        <label for="checkbox2">
                            Corporate
                        </label>
                    </div>
      </div>
      <span id="email_error"></span>
      <input name="OTPemail_stuff" id="OTPemail_stuff" type="text" placeholder="Enter your email id" class="form-control" />
      <input name="" class="OTP_submit_stuff" type="button" value="SEND" />
      </form>
      </div>
    </div>`



 .acadview-popup {
        display: table;
        width: 100%;
        height: 100%;
        z-index: -1;
    }
    .acadview-popup.in {
        z-index: 9999;
    }

    .otp-single-btn {
        background: none;
        color: #11abc7;
        border: none;
        padding: 0;
        position: relative;
        z-index: 9999999;
    }
    .otp-single-btn:hover, .otp-single-btn:focus {
        background: none;
        color: #000;
        text-decoration: none;
    }
    .acadview-popup .close {
        background: #04accb;
        width: 34px;
        height: 33px;
        color: #fff;
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
        border-radius: 100%;
        opacity: 1;
        position: absolute;
        right: -11px;
        top: -6px;
    }
    .acadview-popup .close span {
        font-weight: 300;
        font-size: 24px;
        line-height: 15px;
    }
    .acadview-popup .modal-header {
        background: url(../images/title-bg.png) repeat-x left top;
        border-bottom: 1px solid #d7d7d7;
        -moz-border-radius: 4px 4px 0 0;
        -webkit-border-radius: 4px 4px 0 0;
        border-radius: 4px 4px 0 0;
        text-align: center;
        padding: 12px 0;
    }
    .acadview-popup .modal-header .modal-title {
        color: #000000;
        font-size: 24px;
        font-weight: bold;
    }
    .acadview-popup .modal-sm {
        width: 470px;
        z-index:9999;
    }
    .acadview-popup .modal-content {
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }
    .form-block {
        padding: 30px;
    }
    .form-block input[type="text"] {
        min-height: 54px;
        border: 1px solid #cccccc;
    }
    .form-block input[type="send"], .form-block input[type="button"] {
        width: 100%;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 450px;
        background: -moz-linear-gradient(90deg, #04accb 0%, #0bc2e4 100%);
        background: -webkit-gradient(linear, 90deg, color-stop(0%, #04accb), color-stop(100%, #0bc2e4));
        background: -webkit-linear-gradient(90deg, #04accb 0%, #0bc2e4 100%);
        background: -o-linear-gradient(90deg, #04accb 0%, #0bc2e4 100%);
        background: -ms-linear-gradient(90deg, #04accb 0%, #0bc2e4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#04accb', endColorstr='#0bc2e4', GradientType='0');
        background: linear-gradient(0deg, #04accb 0%, #0bc2e4 100%);
        border: none;
        margin-top: 18px;
        color: #fff;
        font-size: 20px;
        font-weight: 300;
        min-height: 54px;
        line-height: 54px;
    }
    .form-block input[type="share"]:hover, .form-block input[type="button"]:hover {
        background: -moz-linear-gradient(90deg, #0bc2e4 0%, #04accb 100%);
        background: -webkit-gradient(linear, 90deg, color-stop(0%, #0bc2e4), color-stop(100%, #04accb));
        background: -webkit-linear-gradient(90deg, #0bc2e4 0%, #04accb 100%);
        background: -o-linear-gradient(90deg, #0bc2e4 0%, #04accb 100%);
        background: -ms-linear-gradient(90deg, #0bc2e4 0%, #04accb 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0bc2e4', endColorstr='#04accb', GradientType='0');
        background: linear-gradient(0deg, #0bc2e4 0%, #04accb 100%);
    }

Answer 1

如果你想完全摆脱这个按钮，你可以删除或评论这部分代码。

<div class="share-transcript">
   <!--input type="text" name="email" class="form-control" placeholder="Share transcript(s) with "-->
   <input type="button"  class="btn btn-primary otp-single-btn" data-toggle="modal" data-target=".bs-example-modal-sm" value="share">
</div>

或者在样式表中，您可以显示无。

Answer 2

只需将按钮的z-index值设置为低于弹出窗口的z-index即可。您已设置acadview-popup元素9999的z-index值，该值低于按钮＆＃34;分享＆＃34;的z-index。因此，按钮将被放置在弹出窗口上。

如何删除出现在弹出窗口上的onclick按钮 - CSS＆amp; JS相关

2 个答案: