How to make responsive popup div?

Question

Basically my website is Responsive but below is the code for my popup div div is working good on desktop but on mobile portrait it just goes out of the screen, I need to make this div responsive also. additionally i want this div to appear on screen with fadein or other animation which is i dont know how to use now. plz help

HTML is here:

    <section id="html" class="content-section text-center">
      <div class="download-section">
        <div class="container">
            <div class="col-lg-8 col-lg-offset-2">
                <h2>HTML Tutorials</h2>
                <p></p>
                <a href="javascript:void(0)" class="btn btn-default btn-lg"       onclick="toggle_visibility('popupBoxHTML');">More HTML Tutorials</a>
                <div id="popupBoxHTML">
                <div class="popupBoxWrapper">
                    <div class="popupBoxContent">
                        <h3>HTML</h3>
                        <p>You are currently viewing HTML Box.</p>
                        <p>Click <a href="javascript:void(0)"    onclick="toggle_visibility('popupBoxHTML');">here</a> to close popup box one.  </p>
                    </div>
                </div>
            </div>
        </div>
     </div>
   </section>

CSS Here:

#popupBoxOnePosition, #popupBoxHTML{
 margin:10px 0 0 0;
 top: 0; 
 left: 0; 
 position: fixed; 
 width: 100%; 
 height: 100%;
 background:#333; 
 display: none; 
 opacity:.95; 
 z-index:100;
 widows:50%;

 }

 .popupBoxWrapper{
 width: 550px;
 margin: 
 50px auto; 
 text-align: left;

 }
 .popupBoxContent{
   background-color:
  #000; 
 padding: 
  15px; 
 opacity:1;
 border-radius:15px;
 -o-box-shadow:0 0 50px ##219ab3;
 -moz-box-shadow:0 0 50px ##219ab3;
 -webkit-box-shadow:0 0 50px ##219ab3;
 -ms-box-shadow:0 0 50px ##219ab3;
 transition:ease-in;
 transition-delay:1s;
 -webkit-transition:ease-in;
}

javascript here:

    function toggle_visibility(id) {
               var e = document.getElementById(id);
               if(e.style.display == 'block')
                  e.style.display = 'none';
               else
                  e.style.display = 'block';

            }

Solution 1

You'll need to add media query to make it responsive.

@media only screen and (max-width: 600px) {
 .popupBoxWrapper{
     width:100%;
  }
}

When screen-width goes below 600px, this css will make the width of popup 100% instead of fixed 550px. So this will make the div fit to the screen.

Solution 2

No need css media query.

Simply change your css to following. Update width:550px to max-width:550px and add width:95%; Remaining 5% width give you look and feel as popup when screen less than 550px.

 .popupBoxWrapper{
     max-width: 550px;
     width: 95%;
     margin: 
     50px auto; 
     text-align: left;
 }