CODEWITHSUNDEEP
javascriptcsspopup
user3615189
user3615189

Reputation: 31

How to make responsive popup div?

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

            }

Upvotes: 2

Views: 24464

Answers (3)

RajivRisi
RajivRisi

Reputation: 398

No need css media query.

Simply change your CSS to the following. Update width:550px to max-width:550px and add width:95%; The remaining 5% of width gives you a look and feel as a popup when the screen is less than 550px.

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

Upvotes: 1

theHarsh
theHarsh

Reputation: 680

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.

Upvotes: 3

Timeless
Timeless

Reputation: 7537

Bootstrap Modals

or

Remodal

Flat, responsive, lightweight, easy customizable modal window plugin with declarative state notation and hash tracking.

Upvotes: 0

Related Questions