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

            }

Answer 1

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

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

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