如何使此弹出窗口响应不同的屏幕尺寸

Question

I am making a popup message with css and html. 我正在使用CSS和HTML弹出消息。 I am trying to make the popup layout more responsive but with limited css knowledge I am stuck. 我试图使弹出窗口的布局更具响应性，但由于我对CSS的了解有限，所以我被卡住了。 Basically I don't want to force the div with fixed pixels as much as possible. 基本上，我不想强制使用固定像素的div 。 Also, my Button and Anchor url are also hardcoded with fix location in CSS. 另外，我的Button和Anchor url也使用CSS中的修复位置进行了硬编码。 How can I improve that? 我该如何改善呢？

When the popup display, I want to greyout the page behind it. 当弹出窗口显示时，我想将其后面的页面涂成灰色。 But, it seems to work in jsfiddle but when I put it to my web page I only see half of the page is grey out when the popup display. 但是，它似乎可以在jsfiddle中工作，但是当我将其放在我的网页上时，在弹出窗口显示时，我只看到页面的一半是灰色的。 How can I make the full page to grey out? 如何使整个页面变灰？

Please see here: http://jsfiddle.net/chs9x9wj/274/ 请参阅此处： http : //jsfiddle.net/chs9x9wj/274/

Popup will looks like this: 弹出窗口将如下所示：

css: CSS：

div.outer {
    position: relative;
    width: 300px;
    height: 270px;
    border: 3px solid black;
    text-align: center;
    margin:auto;
    z-index: 100;
    background-color: yellow;
} 
div.outer a {
    color: blue;
} 
div.inner-right {
    position: absolute;
    top: 80px;
    right: 10px;
    width: 240px;
    height: 100px;
    /*border: 3px solid blue;*/
    text-align: left;
}

div.inner-left {
    position: absolute;
    top: 80px;
    left: 10px;
    width: 20px;
    height: 100px;
    /*border: 3px solid red;*/
    color: red;
}

div.inner-buttom {
    position: absolute;
    top: 180px;
    left: 120px;
    text-align: center;
}

.prompt-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: black;
    opacity: .8;
    z-index: 99;

}

Html: HTML：

    <!DOCTYPE html>
<html>
<body>

<button onclick="myFunction()">Show me the Pop Up</button>

<div class="prompt-backdrop" id="backdrop" style="visibility: hidden"></div>

<br/>

  <div class="outer" id="myPopup" style="visibility: hidden">

      <a>!</a>
      <br/><br/>

      <a>This div element has position: relative</a>
      <div class="inner-right">
        This is a fact: <br/> <br/>
        The human eye can distinguish about 10 million different colors.
      </div>
      <div class="inner-left">
          !
      </div>

      <div class="inner-buttom">
            <input type="submit" class="like" value="Next" />
            <p><a href="google.com">Go Back</a></p>
      </div>
  </div>

</body>
</html>

JavaScript: JavaScript：

function myFunction() {

  document.getElementById("myPopup").style.visibility = "visible";
      document.getElementById("backdrop").style.visibility = "visible";
}

Answer 1

Using max-width in your CSS is an easy way to dynamically scale elements when the screen gets smaller without using media queries. 在CSS中使用max-width是在屏幕变max-width不使用媒体查询的情况下动态缩放元素的简便方法。

If you want to keep your bottom links centered, you can define a width, ex. 如果要使底部链接居中，则可以定义宽度，例如。 width: 100px; , set left: 50%; ， left: 50%; to move the element halfway across the parent, then margin-left: -50px; 将元素移动到父元素的一半，然后margin-left: -50px; (or negative half the value of whatever your width is) in order to center it. （或宽度宽度的负一半）以居中。

Here's a fiddle with a few of those changes made to help get you started: http://jsfiddle.net/chs9x9wj/281/ 这是一个小提琴，其中进行了一些更改以帮助您入门： http : //jsfiddle.net/chs9x9wj/281/

Answer 2

I removed some of the absolutes, floated & padded the left & right inner divs and allowed the button to cascade. 我删除了一些绝对值，浮动并填充了左和右内部div，并允许按钮层叠。

The background of "grey" depends on a light background behind it to show through the 99% opacity, maybe the background that is not becoming grey has a darker background. “灰色”的背景取决于其背后的浅色背景，以显示99％的不透明度，也许未变灰的背景具有较暗的背景。

css: CSS：

div.outer {
    -ms-transform: translate(0px, 50%); /* IE 9 */
    -webkit-transform: translate(0px, 50%); /* Safari */
    transform: translate(0px, 50%);
    position: relative;
    width: 300px;
    height: 270px;
    border: 3px solid black;
    text-align: center;
    margin: auto;
    z-index: 100;
    background-color: yellow;
} 
div.outer a {
    color: blue;
} 
div.inner-right {
    padding-right: 10px;
    float: right;
    width: 240px;
    height: 100px;
    text-align: left;
}

div.inner-left {
    padding-left: 5px;
    float: left;
    width: 20px;
    height: 100px;
    color: red;
}

div.inner-button {
    text-align: center;
}

.prompt-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: black;
    opacity: .8;
    z-index: 99;

}

html: 的HTML：

    <!DOCTYPE html>
<html>
<body>
<body>

<button onclick="myFunction()">Show me the Pop Up</button>

<div class="prompt-backdrop" id="backdrop" style="visibility: hidden"></div>

<br/>

  <div class="outer" id="myPopup" style="visibility: hidden">

      <a>!</a>
      <br><br>
      <a>This div element has position: relative</a>
      <br><br>
      <div class="inner-right">
        This is a fact: <br/> <br/>
        The human eye can distinguish about 10 million different colors.
      </div>
      <div class="inner-left">
          !
      </div>
      <div class="inner-button">
            <input type="submit" class="like" value="Next" />
            <p><a href="https://www.google.com">Go Back</a></p>
      </div>
  </div>
</body>
</html>

js: unchanged js：不变

image of the test popup 测试弹出窗口的图像

Answer 3

http://jsfiddle.net/9x6v74sb/22/ http://jsfiddle.net/9x6v74sb/22/

If you can use Flexbox, I recommand something like that. 如果可以使用Flexbox，我建议您使用类似的方法。

You should probably add a 您可能应该添加一个

document.getElementById("back").onclick = function(e){
    e.preventDefault();
    document.getElementById("overlay").className = "";
}

如何使此弹出窗口响应不同的屏幕尺寸

问题描述

3 个解决方案

解决方案1
0 2018-07-30 19:18:54

解决方案2
0 2018-07-30 19:21:16

解决方案3
0 2018-07-30 19:31:36

如何使此弹出窗口响应不同的屏幕尺寸

问题描述

3 个解决方案

解决方案1 0 2018-07-30 19:18:54

解决方案2 0 2018-07-30 19:21:16

解决方案3 0 2018-07-30 19:31:36

解决方案1
0 2018-07-30 19:18:54

解决方案2
0 2018-07-30 19:21:16

解决方案3
0 2018-07-30 19:31:36