title: How to make responsive popup div?
body: <p>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</p>
  
  <p>HTML is here:</p>
  
  <pre><code>    &lt;section id="html" class="content-section text-center"&gt;
        &lt;div class="download-section"&gt;
          &lt;div class="container"&gt;
              &lt;div class="col-lg-8 col-lg-offset-2"&gt;
                  &lt;h2&gt;HTML Tutorials&lt;/h2&gt;
                  &lt;p&gt;&lt;/p&gt;
                  &lt;a href="javascript:void(0)" class="btn btn-default btn-lg"       onclick="toggle_visibility('popupBoxHTML');"&gt;More HTML Tutorials&lt;/a&gt;
                  &lt;div id="popupBoxHTML"&gt;
                  &lt;div class="popupBoxWrapper"&gt;
                      &lt;div class="popupBoxContent"&gt;
                          &lt;h3&gt;HTML&lt;/h3&gt;
                          &lt;p&gt;You are currently viewing HTML Box.&lt;/p&gt;
                          &lt;p&gt;Click &lt;a href="javascript:void(0)"    onclick="toggle_visibility('popupBoxHTML');"&gt;here&lt;/a&gt; to close popup box one.  &lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
       &lt;/div&gt;
     &lt;/section&gt;
  </code></pre>
  
  <p>CSS Here: </p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>javascript here:</p>
  
  <pre><code>    function toggle_visibility(id) {
                 var e = document.getElementById(id);
                 if(e.style.display == 'block')
                    e.style.display = 'none';
                 else
                    e.style.display = 'block';
  
              }
  </code></pre>