For some reason the javascript/jquery isn't working in the following code! I was planning to use it in the electron app, to close the window. It didn't work, I tried an alert, still doesn't work. I have tried what not, still doesn't work. I tried the alert in the browser, STILL DOESN'T WORK!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$("#cls").click(function(){
window.close();
alert("Close process began, but it isn't working! :(");
})
$("#test").click(function(){
alert("A simple test, still doesn't work! :(")
})
</script>
<style>
* {
outline: none;
}
body {
margin: 0;
background: linear-gradient(to bottom, rgb(255, 89, 0), rgb(153, 19, 220)) fixed no-repeat;
}
.topBar {
height: 45px;
width: 100vw;
background-color: rgba(0, 0, 0, 0.479);
-webkit-app-region: drag;
}
.btn {
cursor: pointer;
-webkit-app-region: no-drag;
height: 100%;
width: 45px;
text-align: center;
background-color: rgba(0, 0, 0, 0.2);
transition: 0.3s;
border: rgba(0, 0, 0, 0.3);
color: white;
float: right;
}
#cls:hover {
background-color: rgb(232, 45, 45);
}
</style>
</head>
<body>
<div class="topBar">
<button class="btn" id="cls">X</button>
<button class="btn" id="max">+</button>
<button class="btn" id="min">-</button>
</div>
<button id="test">Still doesn't work, so not because of the -webkit-app-region:drag; :(</button>
</body>
</html>In it, I suspected -webkit-app-region:drag, so I kept a button outside of the topBar, and it still doesn't work. :(
I literally suspected MY COMPUTER, so I tried it in jsfiddle, and still doesn't work!
Please help!
