Skinnysite.net

... un modo di esprimersi.

Skip to content

Realizzare un alert javascript alternativo

Valutazione attuale:

/ 11

Dettagli: Categoria principale: Code Snippets; Categoria: Javascript; Pubblicato 06 Agosto 2008; Visite: 3364

Anche se i casi in cui applicare questo script sono rari, ci sono circostanze in cui un'alternativa alla finestra di alert si rende necessaria. Ad esempio con Internet Explorer, qualora si abbia in esecuzione un javascript che visualizza un "conto alla rovescia", se viene visualizzata una semplice alert, l'esecuzione dello script si interrompe fino a quando la finestra di alert non viene chiusa. In questo caso gestire manualmente un messaggio di alert risulta la soluzione del problema.

<html>
  <head>
    <style type="text/css">
    #container #divAlert
    {
      border-right: black 2px solid;
      padding-right: 5px;
      border-top: white 2px solid;
      display: none;
      padding-left: 5px;
      right: 0px;
      padding-bottom: 5px;
      border-left: white 2px solid;
      width: 400px;
      color: black;
      padding-top: 5px;
      border-bottom: black 2px solid;
      position: absolute;
      top: 50px;
      height: 150px;
      background-color: silver;
      text-align: justify;
    }
    p.title 
    {
      padding: 0px;
      border: 0px;
      margin: 0px;
      text-align: center;
      background-color:blue;
      color:white;
      font-weight:bold;
    }
    </style>
    <script type="text/javascript">
    //<![CDATA[
    function myTextContent(obj,s){
    	if(document.all)
        obj.innerText = s;
      else
        obj.textContent = s;
    }
    
    function centerDiv(idDiv, heightDiv, widthDiv)
    {
      var frameWidth = 0;
      var frameHeight = 0;
      
      if (self.innerWidth)
      {
        /* Firefox  */
        frameWidth = self.innerWidth;
        frameHeight = self.innerHeight;
        document.getElementById(idDiv).style.top = (frameHeight - heightDiv) / 2;
        document.getElementById(idDiv).style.left = (frameWidth - widthDiv) / 2;
      }
      else if (document.documentElement && document.documentElement.clientWidth)
      {
        //alert('documentElement');
        frameWidth = document.documentElement.clientWidth;
        frameHeight = document.documentElement.clientHeight;
        document.getElementById(idDiv).style.top = document.body.scrollTop + (frameHeight - heightDiv) / 2;
        document.getElementById(idDiv).style.left = document.body.scrollLeft + (frameWidth - widthDiv) / 2;
      }
      else if (document.body)
      {
        /* IE 6  */
        frameWidth = document.body.clientWidth;
        frameHeight = document.body.clientHeight;
        document.getElementById(idDiv).style.top = document.body.scrollTop + (frameHeight - heightDiv) / 2;
        document.getElementById(idDiv).style.left = document.body.scrollLeft + (frameWidth - widthDiv) / 2;
      }
      else
      {
        return;
      }
    }
    
    function showAlert(s){
      centerDiv(document.getElementById('divAlert').id,150,400);
      myTextContent(document.getElementById('pAlert'), s);
      document.getElementById('divAlert').style.display='block';
    }
    //]]>
    </script>
  </head>
<body>
  <div id="container">
    <input type="button" value="alert" onclick="showAlert('Saluti')" />
    <div id="divAlert">
      <p class="title">ATTENZIONE</p>
      <p id="pAlert" align="justify"></p>
      <p align="center"><input id="ok" style="WIDTH: 50px" 
      onclick="document.getElementById('divAlert').style.display='none';"
          type="button" value="OK">
      </p>
    </div>
  </div>
</body>