javascript - Making a modal responsive - Stack Overflow

admin管理员组

文章数量:1344227

I’m working on a frontend excercise I set up for improving myself and I have hit a real huge headache.

I am trying to make my modal responsive to mobile and tablets. As part of a wordpress plugin that i am creating as an exercise see link here.

This is being use temporarily on a food recipe website

But so far, I think I am close.

I have the jsfiddle link here.

But my main problem is with the CSS. I have left the ments on some things and options I tried.

#overlay:backdrop {
  /*
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  */
}
#overlay {
  visibility: hidden;
  /*
  position: absolute;
  left: 0px;
  top: 0px;
  */
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 10000;
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 30%;
  top: 30%;
  /*
  -webkit-transform: translate(-27%, -10%);
  transform: translate(-27%, -10%);
  */
  text-align: center;
}
#overlay div#gfb_newsletter_signup_form {
  max-width: 750px;
  min-width: 250px;
  max-height: 750px;
  min-height: 250px;
  margin: 5px auto;
  background-color: #fff;
  border: 1px solid #000;
  padding: 20px;
  text-align: center;
  position: absolute;
}
a.boxclose {
  float: right;
  position: absolute;
  top: -10px;
  right: -10px;
  cursor: pointer;
  color: #fff;
  border: 1px solid #AEAEAE;
  border-radius: 30px;
  background: #605F61;
  font-size: 17px;
  display: inline-block;
  line-height: 0px;
  /*
  padding: 11px 7px 17px 7px;
  */
  padding: 11px 8px 15px;
}
.boxclose:before {
  content: "x";
}
.gfb_ebook_img {
  display: block;
  clear: both;
  position: relative;
  /*
  top: -20px;
  left: -30px;
  */
}
#gfb_newsletter_signup_form h1 {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  display: block;
  font-size: 30px;
  font-weight: bold;
  color: #333;
  padding: 0px 10px;
  text-align: center;
  /*style="margin-bottom:20px; font-size:18px;"*/
}
div#p-footer {
  padding: 15px;
  display: block !important;
  position: relative;
}

I’m working on a frontend excercise I set up for improving myself and I have hit a real huge headache.

I am trying to make my modal responsive to mobile and tablets. As part of a wordpress plugin that i am creating as an exercise see link here.

This is being use temporarily on a food recipe website

But so far, I think I am close.

I have the jsfiddle link here.

But my main problem is with the CSS. I have left the ments on some things and options I tried.

#overlay:backdrop {
  /*
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  */
}
#overlay {
  visibility: hidden;
  /*
  position: absolute;
  left: 0px;
  top: 0px;
  */
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 10000;
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 30%;
  top: 30%;
  /*
  -webkit-transform: translate(-27%, -10%);
  transform: translate(-27%, -10%);
  */
  text-align: center;
}
#overlay div#gfb_newsletter_signup_form {
  max-width: 750px;
  min-width: 250px;
  max-height: 750px;
  min-height: 250px;
  margin: 5px auto;
  background-color: #fff;
  border: 1px solid #000;
  padding: 20px;
  text-align: center;
  position: absolute;
}
a.boxclose {
  float: right;
  position: absolute;
  top: -10px;
  right: -10px;
  cursor: pointer;
  color: #fff;
  border: 1px solid #AEAEAE;
  border-radius: 30px;
  background: #605F61;
  font-size: 17px;
  display: inline-block;
  line-height: 0px;
  /*
  padding: 11px 7px 17px 7px;
  */
  padding: 11px 8px 15px;
}
.boxclose:before {
  content: "x";
}
.gfb_ebook_img {
  display: block;
  clear: both;
  position: relative;
  /*
  top: -20px;
  left: -30px;
  */
}
#gfb_newsletter_signup_form h1 {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  display: block;
  font-size: 30px;
  font-weight: bold;
  color: #333;
  padding: 0px 10px;
  text-align: center;
  /*style="margin-bottom:20px; font-size:18px;"*/
}
div#p-footer {
  padding: 15px;
  display: block !important;
  position: relative;
}

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jul 18, 2015 at 22:28 Ikenna asked Jul 15, 2015 at 16:18 IkennaIkenna 1,05944 gold badges1313 silver badges2525 bronze badges 5

• if you use bootstrap your modal will be automatically responsive @ ikenna – siva Commented Jul 15, 2015 at 16:25
• 1 I agree with @siva - it's far easier to build off a framework than from scratch. A framework like bootstrap will make your life easier, and you can always theme/customize it however you want. – hkk Commented Jul 15, 2015 at 16:28
• Could you tell, what are you wanting to get and what the problem is? I'm to lazy to read this amount of code... – Qwertiy Commented Jul 15, 2015 at 16:33
• yes i agree with your ment @ troglodite but we can use the framework only when we know the basic and usage of the particular classes – siva Commented Jul 15, 2015 at 16:33
• @siva I am challenging myself with this exercise.. so a framework is not what i need.. – Ikenna Commented Jul 15, 2015 at 19:48

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You won't get very far with a responsive design that uses fixed pixel widths for modals.

For example, your overlay has:

#overlay div#gfb_newsletter_signup_form {
    max-width: 750px;
    .
    .
    .
}

On a tablet or phone, which may have less than 750px screen width, it will go off the viewport.

You should use percentages instead - in your fiddle I changed the above line to

 max-width:40%;

and it fit in the jsfiddle window.

Even better, would be for you to study Media Queries and make a proper responsive design

You can try to change your overlay to absolutely positioned (that way you can have coordinates for the inner div). Then set top, left, right, bottom all equal to 0, and margin auto. This will center the box on any screen, assuming your dimensions are percentages. Then do the same for #gfb_newsletter_signup_form but add some height to it, perhaps a percentage that makes sense within your min and max values.

So your #overlay and #gfb_newsletter_signup_form might look something like this:

#overlay {
  visibility: hidden;

  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;

  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 10000;
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
  text-align: center;
}


#overlay div#gfb_newsletter_signup_form {
  max-width: 750px;
  min-width: 250px;
  max-height: 750px;
  min-height: 250px;

  height: 30%;

  margin: 5px auto;
  background-color: #fff;
  border: 1px solid #000;
  padding: 20px;
  text-align: center;
  position: absolute;
}

Here's an updated fiddle https://jsfiddle/kzy2a6p7/16/

use @media screen css query to define your model at different screen width.outside this query use class with width in % or em . but all class and ids with width in px should be define inside @media query

 @media screen and (max-width: screenwithinPx) {
      //define your class and id here having with and height in px
    .class{} 
           #Ids{}
        }

本文标签： javascriptMaking a modal responsiveStack Overflow