0

I am trying to make a pop out window with this code in react

ref code

onClick={() =>  
window.open("linkhere")location=yes,height=570,width=520,scrollbars=yes,status=yes'}

This is the code I am using now, This is an opening link in a new tab, But What I want is to open in a pop-window.

Muhammad Iqbal
  • 1,394
  • 1
  • 14
  • 34
Abel_s_tales
  • 9
  • 2
  • Does this answer your question? [JavaScript open in a new window, not tab](https://stackoverflow.com/questions/726761/javascript-open-in-a-new-window-not-tab) – 95faf8e76605e973 Aug 19 '20 at 10:14
  • I think your browser is in full-screen mode. If you are in full-screen mode then the new window will open in new tab. Exit full screen and try once. – Raj Thakar Aug 19 '20 at 10:45

1 Answers1

0

I suggest this:

HTML:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>PopUp Test!</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body class="background">
    <div class="app">
      
      <div class="btn">
        <button class="js-btn">new user?</button>
      </div>

      <div class="modal">
       <div class="modal_content">
        <span class="close">&times;</span>
        <p>I'm A Pop Up!!!</p>
       </div>
      </div>

    </div>
</html>

CSS:

html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
  background-repeat: no-repeat;
}

.background {
  background-image: linear-gradient(#0a70da, #159db3, #10b197);
}

.btn {
  text-align: center;
  position: absolute;
  top: 30%;
  left: 45%;
  zoom: 1.5;
}

button {
  border-radius: 10px;
  background-color: grey;
  outline: none;
}

button:hover {
  background-color: orange;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.25);
}

.modal_content {
  background-color: white;
  position: absolute;
  top: 20%;
  left: 30%;
  width: 40%;
  padding: 20px;
  border-radius: 5px;
  border: 2px solid black;
}

.close {
  color: Black;
  float: right;
}

.close:hover {
  color: red;
  cursor: pointer;
}

JS

const the_button = document.querySelector(".js-btn")
const modal = document.querySelector(".modal")
const closeBtn = document.querySelector(".close")

document.addEventListener("DOMContentLoaded",() => {
  the_button.addEventListener("click", handleClick)
})

function handleClick(event) {
  modal.style.display = "block";
  closeBtn.addEventListener("click", () => {
    modal.style.display = "none"
  })
}
Hadi Mirzaei
  • 222
  • 2
  • 16