How do I make this Modal dialog more responsive?

Question

Unresponsive Modal Dialog, without using Media queries or JS is what the goal (was) is. Can be done - but I have since lost the code to update the question.

You can see it on this Fiddle:

https://jsfiddle.net/4qkonfLk/

Code:

.modalDialog {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999;
  opacity: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}
.modalDialog:target {
  opacity: 1;
  pointer-events: auto;
}
.modalDialog > div {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  background: #fff;
  background: -moz-linear-gradient(#fff, #999);
  background: -webkit-linear-gradient(#fff, #999);
  background: -o-linear-gradient(#fff, #999);
}
.close2 {
  background: #606061;
  color: #FFFFFF;
  line-height: 25px;
  position: absolute;
  right: -12px;
  text-align: center;
  top: -10px;
  width: 24px;
  text-decoration: none;
  font-weight: bold;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -moz-box-shadow: 1px 1px 3px #000;
  -webkit-box-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000;
}
.close2:hover {
  background: #00d9ff;
}

 <a href="#openModal" class="button">Other Information </a>
<div id="openModal" class="modalDialog">
  <div> <a href="#close" title="Close" class="close2">X</a>
  </div>
</div>

Any Suggestions on how to fix this? Thanks!

What do you mean by more responsive? Can you explain more please? — Tha'er M. Al-Ajlouni, Jan 11 '17 at 21:49
Do not vandalize your questions by removing all relevant details. If you want to indicate that @media queries are the answer, then accept roberto tomas's answer by clicking the checkmark in the margin. Or, you can post an answer of your own, if you aren't completely satisfied with his. — Cody Gray, Oct 19 '17 at 13:25
Okay, well I can't delete it, I want it gone off my profile. — jeffrey crowder, Oct 19 '17 at 18:37

score 1 · Answer 1 · answered Jan 11 '17 at 21:56

You can specify mobile-only CSS by using media queries, media queries applies CSS rules only in specific conditions such as a width range, for more see the following article.

In your case you can target mobiles width (which is usually 360px) as the max-width of your media query as following:

.modalDialog {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999;
  opacity: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}
.modalDialog:target {
  opacity: 1;
  pointer-events: auto;
}
.modalDialog > div {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  background: #fff;
  background: -moz-linear-gradient(#fff, #999);
  background: -webkit-linear-gradient(#fff, #999);
  background: -o-linear-gradient(#fff, #999);
}
.close2 {
  background: #606061;
  color: #FFFFFF;
  line-height: 25px;
  position: absolute;
  right: -12px;
  text-align: center;
  top: -10px;
  width: 24px;
  text-decoration: none;
  font-weight: bold;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -moz-box-shadow: 1px 1px 3px #000;
  -webkit-box-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000;
}
.close2:hover {
  background: #00d9ff;
}
@media (max-width: 360px) {
  .modalDialog > div {
    width: 300px;
  }
}

<a href="#openModal" class="button">Other Information </a>
<div id="openModal" class="modalDialog">
  <div> <a href="#close" title="Close" class="close2">X</a>
  </div>
</div>

score 1 · Answer 2 · edited May 23 '17 at 12:01

1

You want to use @media queries to create alternative renderings.

Like:

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

rynave's answer here lists many good common ones; I think it is common to have 2-4 for:

pc/tablet, phone
phone, tablet, pc
phone, tablet, pc, hi res Or
watch app, phone, tablet, pc

Not sure his iPhone one is so useful any more.

edited May 23 '17 at 12:01

Community

1
1

answered Jan 11 '17 at 21:57

roberto tomás

4,040
4
38
64

yea, I tried something like this. But, it didn't seem to work. I will try this article see what happens, but if its what I already did, it won't work. – jeffrey crowder Jan 11 '17 at 23:48

jeffrey crowder · Answer 3 · 2017-10-19T18:39:48.710

0

I ended up using some custom CSS classes based on the screensize (Media Queries)to use something different for smaller screens - I ended up scrapping the entire thing after though, so this question is pretty much irrelevant to anything in the community, since I couldn't delete it, I am editing my answers to help understand what I was talking about.

edited Oct 19 '17 at 18:39

answered Jan 11 '17 at 23:56

jeffrey crowder

91
11

How do I make this Modal dialog more responsive?

3 Answers3