I have a circle after clicking on which a popup appears . This popup has a button to close it. But it doesn't work the way I want it to. I want the popup to close but not reload the page.
I tried using onclick="this.parentNode.parentNode.remove(); return false;" . But it doesn't work correctly. Please tell me how to do it!
HTML:
<main>
<div >
<input onclick="check()" type="checkbox" name="popup__input" id="popup__input" >
</div>
<div name="popup" id="popup">
<label >
<form>
<div >
<input type="text" id="fname" name="fname"><br><br>
</div>
<button type="submit" form="nameform" value="Submit">Відправити</button>
<div >
<button >×</button>
</div>
</form>
</label>
</div>
<div >
</div>
</main>
CSS:
*,
*::before,
*::after {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
}
main {
width: 100%;
height: 100%;
position: relative;
}
.button {
width: 200px;
height: 200px;
border-radius: 100%;
background: linear-gradient(#e66465, #9198e5);
position: absolute;
grid-area: "c";
transition: linear 4s;
}
input[type=text], select {
width: 100%;
height: 60px;
padding: 12px 20px;
margin: 40px 0;
font-size: 60px;
display: flex;
border: 1px solid #ccc;
box-sizing: border-box;
border-radius: 5px;
}
form {
position: absolute;
display: grid;
grid-template-areas:
"a"
"b"
"c";
grid-template-columns: repeat(12, 1fr);
}
.form__input{
display: grid;
grid-area: "b";
grid-column-start: 2;
grid-column-end: 12;
}
.close__button{
width: 50px;
position: absolute;
height: 50px;
cursor: pointer;
border: none;
outline: none;
font-size: 3rem;
font-weight: bold;
background-color: rgba(104, 99, 99, 0);
grid-column-start: 12;
grid-column-end: 12;
}
.close-button__container{
display: grid;
grid-area: "a";
place-items: start middle;
}
.form__button {
width: 100%;
height: 55px;
display: grid;
margin-top: 110px;
position: absolute;
font-size: 35px;
color: #fff;
align-items: center;
background-color:#2962d3;
grid-column-start: 3;
grid-column-end: 11;
border-radius: 5px;
cursor: pointer;
}
.form__button:hover {
background-color: #4a79d6;
transition: 0.5s;
}
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
}
.popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
z-index: 10;
transform: translate(-50%, -50%);
border-radius: 10px;
width: 850px;
height: 200px;
background: rgba(104, 99, 99, 0.5);
justify-content: end;
align-items: end;
}
.popup__label {
}
.popup__check {
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
cursor: pointer;
z-index: 3;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
@media (max-width: 1024.98px) {
.button {
width:80px;
height: 80px;
border-radius: 100%;
background: linear-gradient(#e66465, #9198e5);
position: absolute;
transition: linear 4s;
}
}
@media (max-width: 890.98px) {
.popup {
width: 750px;
}
.form__button {
width: 500px;
height: 45px;
grid-column-start: 3;
grid-column-end: 6;
}
}
@media (max-width: 768.98px) {
input[type=text], select {
padding: 12px 20px;
margin: 50px 0;
font-size: 40px;
display: flex;
border: 1px solid #ccc;
box-sizing: border-box;
}
.form__button {
width: 100%;
height: 45px;
grid-column-start: 3;
grid-column-end: 11;
margin-top: 125px;
}
.popup {
width: 600px;
}
}
@media (max-width: 620.98px) {
.popup {
width: 480px;
}
input[type=text], select {
height: 50px;
}
.form__button {
height: 35px;
grid-column-start: 3;
grid-column-end: 11;
font-size: 20px;
}
.close__button{
font-size: 2rem;
}
}
@media (max-width: 507.98px) {
input[type=text], select {
padding: 12px 20px;
margin: 45px 0;
}
.popup {
width: 330px;
}
.close__button{
width: 25px;
height: 25px;
}
}
@media (max-width: 400.98px) {
.form__button {
height: 30px;
position: absolute;
font-size: 15px;
grid-column-start: 3;
grid-column-end: 11;
margin-top: 100px;
}
.popup {
width: 350px;
height: 150px;
}
}
@media (max-width: 358.98px) {
input[type=text], select {
height: 30px;
padding: 12px 20px;
margin: 35px 0px;
}
.form__button {
height: 30px;
margin-top: 80px;
position: absolute;
font-size: 15px;
}
.popup {
width: 280px;
height: 150px;
}
.close__button{
width: 15px;
height: 15px;
}
}
@media (max-width: 300.98px) {
input[type=text], select {
width: 200px;
height: 30px;
padding: 12px 20px;
margin: 35px 0px;
font-size: 20px;
display: flex;
border: 1px solid #ccc;
box-sizing: border-box;
}
.form__button {
height: 30px;
margin-top: 80px;
position: absolute;
font-size: 15px;
}
.popup {
width: 240px;
height: 150px;
}
}
JS:
let elem = document.querySelector('.button');
function check() {
const popup = document.getElementsByClassName('popup');
if (document.getElementById('popup__input').checked = true) {
for (var i=0;i<popup.length;i =1){
popup[i].style.display = 'block';
}
} else {
popup.style.display = "none";
}
}
const changePosition = () => {
let randX = Math.random();
let randY = Math.random();
const circleSize = {
width: elem.clientWidth,
heigth: elem.clientHeight
};
const windowWidth = window.innerWidth - circleSize.width;
const windowheigth = window.innerHeight - circleSize.heigth;
let randXMult = windowheigth * randX;
let randXP = randXMult 'px';
let randYMult = windowWidth * randY;
let randYP = randYMult 'px';
elem.style.top = randXP;
elem.style.left = randYP;
};
setInterval(changePosition, 1000);
CodePudding user response：
Try setting the type of button on the close icon as button and give the button an id of close__button so that we can select with javascript.
<button id="close__button" type="button" >×</button>
Grab the button and add a click event listener:
function close() {
const popup = document.getElementById('popup').style.display = "none";
}```
CodePudding user response：
To close a popup window without reloading the page in HTML, you can use the window.close() method. This method can be called from within the popup window to close itself. Here is an example of how you can use the window.close() method to close a popup window:
<button onclick="window.close()">Close Window</button>
In this example, the button element has an onclick attribute that calls the window.close() method when the button is clicked. This will cause the popup window to close without reloading the page.
Keep in mind that the window.close() method can only be used to close a window that was opened using JavaScript, such as with the window.open() method. It cannot be used to close windows that were not opened using JavaScript. Additionally, some browsers may prevent the window.close() method from being used in certain situations for security reasons.