vendredi 6 octobre 2017

Why does this JavaScript code not working?

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