I'm trying to make a custom alert box with HTML, CSS and JavaScript. Can someone please help me make this code work?
When i press the custom alert button on the webpage, nothing happens.
I would be grateful if you suggest me another way of completing this task in another way! Thanks!
function CustomAlert() {
this.render = function(dialog) {
var W = window.innerWidth;
var H = window.innerHeight;
var dialogoverlay = document.getElementById('overlay');
var dialogbox = document.getElementById('dialogbox');
dialogoverlay.style.display = "block";
dialogoverlay.style.height = H + "px";
dialogbox.style.left = (W / 2) - (550 * .5) + "px";
dialogbox.style.top = "100px";
dialogbox.style.display = "block";
document.getElementById('dialogboxhead').innerHTML = "Acknowledge This Message";
document.getElementById('dialogboxbody').innerHTML = dialog;
document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Alert.ok()">OK</button>';
}
this.ok {
function() {
document.getElementById(dialogbox).style.display = "none";
document.getElementById(overlay).style.display = "none";
}
}
var Alert = new CustomAlert();
#overlay {
display: none;
opacity: 0.8;
position: fixed;
top: 0px;
left: 0px;
background: #FFF;
width: 100%;
z-index: 10;
}
#dialogbox {
display: none;
position: fixed;
background: #000;
border-radius: 7px;
width: 550px;
z-index: 10;
}
#dialogbox>div {
background: #FFF;
margin: 8px;
}
#dialogbox>div>#dialogboxhead {
background: #666;
font-size: 19px;
padding: 10px;
color: #CCC;
}
#dialogbox>div>#dialogboxbody {
background: #333;
padding: 20px;
color: #FFF;
}
#dialogbox>div>#dialogboxfoot {
background: #666;
padding: 10px;
text-align: right;
}
}
<div id="overlay">
</div>
<div id="dialogbox">
<div>
<div id="dialogboxhead"></div>
<div id="dialogboxbody"></div>
<div id="dialogboxfoot"></div>
</div>
</div>
<button onclick="Alert.render('You look very pretty today.')">Custom alert </button>
Aucun commentaire:
Enregistrer un commentaire