控制多个弹出窗口的位置

Question

我在此代码中有3个弹出窗口。 我希望能够控制3个弹出窗口中每个窗口的位置，但是它们都位于完全相同的位置。 如何控制每个人的位置？ 有人可以帮忙吗？ 非常感谢！！

https://jsfiddle.net/vibajajo64/v8prq87x/1/

<!DOCTYPE html>
<html>
<head>
    <style>
        .popup {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom:0px;
  right: 0px;
  margin: auto;
  width: 200px;
  height: 150px;
  font-family: verdana;
  font-size: 13px;
  padding: 10px;
  background-color: rgb(240, 240, 240);
  border: 2px solid grey;
  z-index: 100000000000000000;
}

.blur {
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
}

.cancel {
  display: relative;
  cursor: pointer;
  margin: 0;
  float: right;
  height: 10px;
  width: 14px;
  padding: 0 0 5px 0;
  background-color: red;
  text-align: center;
  font-weight: bold;
  font-size: 11px;
  color: white;
  border-radius: 3px;
  z-index: 100000000000000000;
}

.cancel:hover {
  background: rgb(255, 50, 50);
}

#overlay1,
#overlay2,
#overlay3 {
  position: fixed;
  display: none;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  background: rgba(255, 255, 255, .8);
  z-index: 999;
}

#popup {
  position: absolute;
  width: 400px;
  height: 200px;
  background: rgb(255, 255, 255);
  border: 5px solid rgb(90, 90, 90);
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  margin: auto;
}
    </style>

    </head>

    <body>
  <div id="overlay1">
    <div id="popup">
      <h3>POPUP 1</h3> http://www.google.com <a href="javascript:myBlurFunction(0, 'popup1');"> hide</a></div>
  </div>
  <div id="main_container1">
    <a href="javascript:myBlurFunction(1, 'popup1');">OPEN POPUP 1</a><br/>
  </div>
  <br/>

<div id="overlay2">
    <div id="popup">
      <h3>POPUP 2</h3> http://www.cnn.com <a href="javascript:myBlurFunction(0, 'popup2');"> hide</a></div>
  </div>
  <div id="main_container2">
    <a href="javascript:myBlurFunction(1, 'popup2');">OPEN POPUP 2</a><br/>
  </div>
  <br/>

  <div id="overlay3">
    <div id="popup">
      <h3>POPUP 3</h3> http://www.yahoo.com<a href="javascript:myBlurFunction(0, 'popup3');"> hide</a></div>
  </div>
  <div id="main_container3">
    <a href="javascript:myBlurFunction(1, 'popup3');">OPEN POPUP 3</a><br/>
  </div>

<script type="text/javascript">
  var myBlurFunction = function(state, popup_type) {
    if (state == 1) {
      if (popup_type == "popup1") {
        var containerElement = document.getElementById('main_container1');
        var overlayEle = document.getElementById('overlay1');
        overlayEle.style.display = 'block';
        containerElement.setAttribute('class', 'blur');
      } else {
        if (popup_type == "popup2") {
        var containerElement = document.getElementById('main_container2');
        var overlayEle = document.getElementById('overlay2');
        overlayEle.style.display = 'block';
        containerElement.setAttribute('class', 'blur');
      } else {
        var containerElement = document.getElementById('main_container3');
        var overlayEle = document.getElementById('overlay3');
        overlayEle.style.display = 'block';
        containerElement.setAttribute('class', 'blur');
      }}}

      else {
      if (popup_type == "popup1") {
        var containerElement = document.getElementById('main_container1');
        var overlayEle = document.getElementById('overlay1');
        overlayEle.style.display = 'none';
        containerElement.setAttribute('class', 'null');} 

      else {
      if (popup_type == "popup2") {
        var containerElement = document.getElementById('main_container2');
        var overlayEle = document.getElementById('overlay2');
        overlayEle.style.display = 'none';
        containerElement.setAttribute('class', 'null');}

      else {
        var containerElement = document.getElementById('main_container3');
        var overlayEle = document.getElementById('overlay3');
        overlayEle.style.display = 'none';
        containerElement.setAttribute('class', 'null');
      }}
    }
  };
</script>


<Center>All good men try to do their level best.</Center>
</body>
</html>

Answer 1

弹出窗口是绝对定位的。您可以更改左，右，上，下来更改弹出窗口的位置。这是一个示例https://jsfiddle.net/v8prq87x/2/

document.getElementById("popup").style.left="200px";//
//you can use  left ,right ,top ,bottom css properties to change location of absolutely positioned popup

更新

请仔细检查更新版本https://jsfiddle.net/v8prq87x/3/ ，代码只会更改弹出窗口1-是的问题是您有3个具有相同ID的元素，所以只有第一个被调用。ID是唯一名称只有一个元素可以有一个弹出窗口ID。所以您需要的是一个类。请参阅我的更新代码。在这里，我为3个弹出divs添加了类弹出窗口。因此我们可以以document.getElementsByClassName("popup")[0]

控制多个弹出窗口的位置

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-03-29 01:14:22

控制多个弹出窗口的位置

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-03-29 01:14:22

解决方案1
1 已采纳 2017-03-29 01:14:22