1

I am doing a popup image with close button and dimmed background. When the popup is displayed and users click outside of it, it supposes to close the popup. It works fine on other browser, but not safari. I found on Z-index problems on ipad that I need to put -webkit-transform: translate3d(0,0,0) to the same DOM level but I am not really sure about the concept. Can someone help me, please? Here is my code:

/**********************HTMl*********************/

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

Thanks.

Anh Mac
  • 11
  • 2
  • Read up on **vendor prefixes**, check this thread: https://stackoverflow.com/questions/18083056/css-what-are-moz-and-webkit – Dor-Ron Aug 08 '17 at 01:55

0 Answers0