モバイルデバイスでポップアップdivを作成する

Question

モバイルデバイスでポップアップdivを反応的にするようにしています。それは完全に正常にウェブサイト上で動作しますが、私の携帯デバイスでは、ポップアップを終了することはできませんし、それは大きすぎます。私はメディアクエリを使用する必要があると仮定していますが、私はいくつか試してみましたが、私はメディアクエリにあまり経験はありません。私は自分の問題のスクリーンショットとポップアップウィンドウのコードを提供しました。

CSS：

<style> 
    #close{ 
    width: 20px; 
    height: 20px; 
    background: #000; 
    border-radius: 50%; 
    border: 3px solid #fff; 
    display: block; 
    text-align: center; 
    color: #fff; 
    text-decoration: none; 
    position: absolute; 
    top: -15px; 
    right: -15px; 
    cursor: pointer; 
    } 

    </style> 

    <!--Shop Now Button--> 
    <style> 

    #btn1{ 
    position:absolute; 
    float: center; 
    width: 300px; 
    height: 50px; 
    font-size: 20px; 
    font-weight: bold; 
    /* box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); */ 
    margin-top:320px; /*brings buttons down*/ 
     margin-left:60px; 
    } 


    #emailf{ 
     position:absolute; 
     float: center; 
    width: 300px; 
    height: 40px; 
    font-size: 20px; 
    color:black; 
    font-weight: bold; 
    /* box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); */ 
    margin-top:200px; /*brings buttons down*/ 
     margin-left:60px; 
    } 

    #password1 { 
     position:absolute; 
    float: center; 
    width: 300px; 
    height: 40px; 
    font-size: 20px; 
    color:black; 
    font-weight: bold; 
    /* box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); */ 
    margin-top:260px; /*brings buttons down*/ 
     margin-left:60px; 
    } 


    </style> 

    <!-- CSS for the Popup Box --> 
    <style> 




    #hider 
    { 
     position:fixed; 
     top: 0%; 
     left: 0%; 
     width:9000px; 
     height:9000px; 
     margin-top: -100px; /*set to a negative number 1/2 of your height*/ 
     margin-left: -200px; /*set to a negative number 1/2 of your width*/ 
     opacity:0.8; 
     background-color:#666; 
     z-index:99999; 

    } 

    #popup_box 
    { 
     background-image: url('https://cdn.shopify.com/s/files/1/0569/4201/files/popupbanner_3.jpg?11297628032998908977'); 
     position:fixed; 
     top: 50%; 
     left: 50%; 
     width:450px; 
     height:570px; 
     margin-top: -315px; /*set to a negative number 1/2 of your height*/ 
     margin-left: -225px; /*set to a negative number 1/2 of your width*/ 

     z-index:999999; 

     border: none; 
     border: none; 
     padding: 40px; 


    }  


    </style> 

JAVASCRIPT/jQueryの：

<script> 

    $(document).ready(function() { 
     //hide hider and popup_box 
     $("#hider").hide 
     $('#popup_box').fadeIn("slow"); 

     //on click show the hider div and the message 
     $("#showpopup").click(function() { 
      $("#hider").fadeIn("slow"); 

     }); 


     //on click hide the message 
     $("#close").click(function() { 

      $("#hider").fadeOut("slow"); 
      $('#popup_box').fadeOut("slow"); 
      $('#popup_box').close; 

     }); 

     $("#shop").click(function() { 

      $("#hider").fadeOut("slow"); 
      $('#popup_box').fadeOut("slow"); 
     }); 

     $(document).keyup(function(e) { 
    if (e.keyCode == 27) { 
     $("#hider").fadeOut("slow"); 
     $('#popup_box').fadeOut("slow"); 
      $('#popup_box').close; 
    } 
}); 

     }); 


function PopUp(hideOrshow) { 
    if (hideOrshow == 'hide') { 
     document.getElementById('ac-wrapper').style.display = "none"; 
    } 
    else if(localStorage.getItem("popupWasShown") == null) { 
     localStorage.setItem("popupWasShown",1); 
     document.getElementById('ac-wrapper').removeAttribute('style'); 
    } 
} 
window.onload = function() { 
    setTimeout(function() { 
     PopUp('show'); 
    }, 0); 
} 


function hideNow(e) { 
    if (e.target.id == 'ac-wrapper') document.getElementById('ac-wrapper').style.display = 'none'; 
} 

</script> 

HTML：

<div id="ac-wrapper" style='display:none' onClick="hideNow(event)"> 
    <div id="hider"></div> 
    <div id="popup_box" > 




     <br> 
     {% form 'create_customer' %} 


    <center> 
     <div id="emailf" class="clearfix large_form"> 
       <label for="email" class="label"></label> 
       <input type="email" value="" name="customer[email]"placeholder="Email" id="email" class="text" style="text-align:center; margin: 0 auto; width:300px; height:30px;" /> 
      </div> 
     <div id="password1" class="clearfix large_form"> 
       <label for="password" class="label"></label> 
       <input type="password" value="" name="customer[password]"placeholder="Password" id="password" class="password text" style="text-align:center; margin: 0 auto; width:300px; height:30px;" /> 
      </div> 



     <div id="btn1" class="clearfix large_form"> 
       <label for="Create" class="btn1"></label> 
       <input type="submit" value="SIGN UP!" style="text-align:center; font-weight:bold;margin: 0 auto; width:310px; height:40px;background-color:#852B8A;color:white;" /> 
      </div> 
     <div id="close">X</div> 
    <!-- <input class="btn1" type="submit" value="Create" />--> 
    <!-- <button id="shop"><a href="https://www.alzerina.com/collections/ready-to-wear">Sign Up Now!</a></button> --> 

    </center> 
    </div> {% endform %} 
</div> 

あなたはポップアップのウェブ版を見てもよいalzerina.comで

Answer 1

次のようなメディアクエリを使用することができます。

<style> 
    @media (max-width: 600px) { 
    #popup_box{ 
    top: 0; 
    left: 0; 
    width:100%; 
    max-width: 100%; 
    height:100%; 
    } 
} 
</style>