Question

我正在使用关闭按钮和暗灰色背景进行弹出图像。当显示弹出窗口并且用户在其外部单击时，它会假设关闭弹出窗口。它在其他浏览器上工作正常，但不是safari。我在Z-index problems on ipad上发现我需要将-webkit-transform: translate3d(0,0,0)放到相同的DOM级别，但我不确定这个概念。有谁可以帮助我吗？这是我的代码：

/ **********************的HTMl ********************* / < / p>

<body id="price">
<div class="site-wrapper">
    <div class="site-wrapper-inner">
        <div class="cover-container">
            <?php include('header.php')?>
            <div id="content-border" >
                <div id="content">
                    <h1><strong>Packages</strong></h1>
                    <P id="package-p"></P>
                    <div>
                        <div id="price-col">
                        <button class="img-circle" id="price-circle" id="myBtn1" onClick="openPopup(1)">
                            <div>
                                <h4></h4>
                                <span id="currency">$</span>
                                <span id="price-large"></span>
                                <p id="price-small"></p>
                                <p></p>
                            </div>
                        </button>
                    </div>

                    <div id="myModal1" class="popup">
                        <div class="popup-content">
                            <img src="images/The-Apprentice_low.jpg" id="popup-content1"><span class="closeBtn" onClick="closePopup()">&times;</span>
                        </div>
                    </div>

                    <div id="price-col">
                        <button class="img-circle" id="price-circle" id="myBtn2" onClick="openPopup(2)">
                            <div>
                                <h4></h4>
                                <span id="currency">$</span>
                                <span id="price-large"></span>
                                <p id="price-small"></p>
                                <p></p>
                            </div>
                       </button>
                   </div>

                   <div id="myModal2" class="popup">
                       <div class="popup-content">
                           <img src="images/The-Celebrity-Chef_low.jpg" id="popup-content2"><span class="closeBtn" onClick="closePopup()">&times;</span>
                       </div>
                   </div>
               </div>
          </div>
      </div>

      <?php include('footer.php')?>
    </div>
  </div>
</div>

<?php include('html-body-end.php')?>
</body>

/ ******** CSS ******************** *** /

#package-p{
    background-color: #fff;
    color: #000;
    padding: 10 20;
    text-shadow: none;
}
#price-col{
    margin:0 auto;
    width:50%;
    float: left;
    text-align: center;
}


#price-circle{
    margin: 30 auto;
    background: #ffffff;
    padding: 35px;
    text-align: center;
    height: 250px;
    width: 250px;
    display: table;
    color: #222222;
    box-shadow: 0px 0px 10px 5px rgba(206, 44, 44, 0.5);
    border: 0;
    transition: all 0.3s;
    -moz-transition: all 0.3s; /* Firefox 4 */
    -webkit-transition: all 0.3s; /* Safari and Chrome */
    -o-transition: all 0.3s; /* Opera */
}

#price-circle > div{
    display: table-cell; 
    vertical-align: middle;
}

#currency{
    font-size: 30px;
}

#price-circle:hover{
    box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.5);
    background-color: #ce2c2c;
    color: #fff;
}

/*Popup*/

.popup {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    /*    padding-top: 300px;  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 */
    text-align: center;
}

.popup-content {
    margin: auto;
    color: #ffffff;
    display: inline-block;
    position: relative;
}
.popup::after, .popup::before{
    display: block;
    content: "";
    height: 5%;
}

.popup-content img{
    max-height: 90vh;
    max-width: 90vw;
    min-height: 170px;
    min-width: 240px;
    z-index: 10;
}

/* The Close Button */

.closeBtn{  
    color: rgba(255,255,255,5);
    font-size: 36px;
    font-weight: bold;
    position: absolute;
    margin-top: -2.1vh;
    right: 0;
    display: inline-block;
    z-index: 10;    
}

.closeBtn:hover, .closeBtn:focus{    
    color: #000;
    cursor: pointer;    
}

感谢。

与safari的Z-index问题

0 个答案: