CODEWITHSUNDEEP
javascripthtmlpopup
vinman64
vinman64

Reputation: 55

Controlling the location of multiple pop-up windows

I have 3 pop-up windows in this code. I would like to be able to control the position of each of the 3 pop-up windows, however they all go in exactly the same place. How can I control the positioning of each one? Can anyone help? Thanks so much!!

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>

Upvotes: 0

Views: 58

Answers (1)

Madhawa Priyashantha
Madhawa Priyashantha

Reputation: 9872

popup is absolutely positioned.you can change left,right,top,bottom to change location of popup.here is a example 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

update

please check updated version https://jsfiddle.net/v8prq87x/3/ on closer inspection, the code only changes pop-up1 - yes problem was you have 3 element with same id so only first one get called.id is a unique name only one element can have a popup id.so what you need is a class.see my updated code.in there i have added class popup for 3 popup divs.so we can access 1st one as document.getElementsByClassName("popup")[0]

Upvotes: 1

Related Questions