Greetings! Currently, my code triggers an alert when I click on the "send an alert" link.
However, the alert pops up far from the actual link itself.
I am aiming to have the alert display close to the link that triggers it.
What adjustments should I make in my code to ensure the alert is positioned next to my link?
<alert>
<div id="overlay" ></div>
<div id="alertPanel" ></div>
</alert>
<a href="#" onclick="alert('Custom Alert','content of this alert');">send an alert</a>
<br>
<a href="#" onclick="alert('Custom Alert number 2','content of this second alert');">send an alert</a>
alert #overlay{
position:fixed;
z-index:999;
top:0px;
left:0px;
width:100%;
height:100%;
background-color:#000;
opacity:0.7;
display: none;
}
alert #alertPanel{
position:absolute;
top:25%;
min-height: 170px;
width: 450px;
margin-left: 24%;
z-index:9999;
color:#000;
border:1px solid #303030;
background-color:#eaeaea;
display: none;
text-align: center;
font-size: 24px;
font-weight:100%;
margin-bottom: 20px;
}
alert div.texte{
width: 400px;
display:inline-block;
padding:20px 0px 10px 0px;
word-wrap: break-word;
}
alert span.close{
background: url('') no-repeat center center;
cursor:pointer;
height:32px;
width:32px;
position:absolute;
right:12px;
top:12px;
cursor:pointer;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
opacity:1.0;
}
alert #alertPanel h2{
font-weight:100%;
font-size:22px;
padding:25px 0px 15px 15px;
text-align:center;
text-shadow:1px 1px 1px #000;
margin:0px;
background-color: #323232;
border:2px solid #fff;
-moz-box-shadow:0px 0px 8px #000;
-webkit-box-shadow:0px 0px 8px #000;
box-shadow:0px 0px 8px #000;
color: #FFFFFF;
}
window.alert = function(title, message) {
document.getElementById("alertPanel").innerHTML = "<span class=\"close\" onclick=\"closeAlert();\"></span><h2>" + title + "</h2><div class=\"texte\">" + message + "</div>";
document.getElementById('alertPanel').style.display='block';
document.getElementById('overlay').style.display='block';
}
function closeAlert()
{
document.getElementById('alertPanel').style.display='none';
document.getElementById('overlay').style.display='none';
}