Wie man responsive popup-div?

Grundsätzlich meine website ist Responsive, aber unten ist der code für mein popup-div-div ist eine gute Arbeit, die auf desktop sondern auch auf mobilen Porträt es geht nur der Bildschirm, die ich brauche, um dieses div reaktionsschnell Weg auch. zusätzlich möchte ich dieses div auf dem Bildschirm erscheint mit fadein oder andere animation, die ich nicht wissen, wie zu verwenden jetzt. plz help

HTML ist hier:

    <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 Hier:

#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 hier:

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

            }

InformationsquelleAutor user3615189 | 2015-01-30