alert personalizzato

**luvicri** · 26-12-2010, 16:08

ragazzi per caso sapete come creare con javascrip alert personalizzati?

cioè vi spiego.....

ad esempio ho un form ed effettuo sui campi di questo form dei controlli con javascript. nel momento in cui trovo un errore nella compilazione di questo form esce un alert che spiega tale errore.
io vorrei creare un alert grafico nn standard.
ho provato ad usare window.open() e a creare il mio alert personalizzato. andrebbe tutto bene a parte il fatto che pur avendo impostato risizable=no, location=no, status=no l'alert "personalizzato" è comunque ridimensionabile, ha la barra degli indirizzi e la barra in basso dello stato. secondo voi come posso fare??? ammesso che si possa fare!

grazie!

**cavicchiandrea** · 27-12-2010, 10:36

Ciao e benvenuto, prova a vedere se qui trovi qualcosa che faccia al caso tuo.

**luvicri** · 27-12-2010, 13:49

grazie per l'interessamento! comunque a me serve javascript, non jquery ecc. ad esempio a te non è mai capitato di voler modificare quella schifosissima finestra alert? con una di tua produzione bella accattivante? io vorrei sapere se è possibile farlo con javascript!

**cavicchiandrea** · 27-12-2010, 14:19

Gli avvisi di sistema alert, confirm, prompt, non puoi modificarli puoi solo aggiungere testo.

**NonCeLaFaccio+** · 27-12-2010, 17:59

Ciao,
questa è solo un'idea e probabilmente c'è qualche errore perché non ho potuto lavorarci con cura ma forse può darti qualche spunto:

codice:

<html>
<head>
   <style>
      .errore {
         position:          relative;
         top:               100px;
         border:            2px solid red;
         background:        yellow;
         text-align:        center;
         width:             300px;
         display:           none;
      }
   </style>

   <script type="text/javascript">
      function controllo() {
         document.getElementById('errore').innerHTML = "";
         document.getElementById('errore').style.display = "none";
         document.getElementById('errore').style.left = Math.floor((screen.width-300)/2);

         if (document.getElementById('inp1').value == "") {
            document.getElementById('errore').style.display = "block";
            document.getElementById('errore').innerHTML += "Campo 1 non valorizzato
";
         }

         if (document.getElementById('inp2').value == "") {
            document.getElementById('errore').style.display = "block";
            document.getElementById('errore').innerHTML += "Campo 2 non valorizzato";
         }

         if (document.getElementById('errore').innerHTML != "") {
            document.getElementById('errore').innerHTML += "
<input type=\"button\" value=\"OK\" onclick=\"document.getElementById('errore').style.display = 'none'\">";
         }

      }
   </script>
</head>
<body>
   <input type="text" id="inp1">
   <input type="text" id="inp2">
   <input type="button" onclick="controllo()">
   <div id="errore" class="errore"></div>
</body>
</html>

**luvicri** · 28-12-2010, 12:42

grazie mille per la risposta!!! validissima come soluzione... ah funziona tutto correttamente! ho provato! ma si tratta di DOM giusto? dovrei studiare per bene questa parte per padroneggiare perfettamente quel codice... cioè ho capito cosa fa, il problema è che modificarlo a mio piacimento be questa è un'altra storia!

io comunque ho creato questa roba...

</script>

codice:

<script type="text/javascript">  window.open('finestra_personalizzata.html','personalizzata','width=270, height=110, left=410, top=250,resizable=no, fullscreen=no, menubar=no, toolbar=no, location=no, scrollbars=no, status=no');  </script>

questo sarebbe perfetto... il problema è questo: non mi elimina la status bar in basso e la barra degli indirizzi in alto. secondo voi per quale motivo?

p.s. grazie a tutti per le risposte rapide ed esaurienti!

**NonCeLaFaccio+** · 28-12-2010, 16:36

Questioni di sicurezza.
L'url ormai viene visualizzato sempre per permettere al navigatore di sapere su che sito si trova ed essere sicuro di non essere stato reindirizzato su un sito di phishing.

Riguardo al resto basta che studi un po' di javascript e di css.

Tanto per cominciare a farti capire di che si tratta:

document.getElementById('errore')

è un istruzione che permette di "puntare" all'elemento che ha id="errore", una volta puntato puoi agire su di lui utilizzando le sue varie proprietà e metodi, per esempio

document.getElementById('errore').innerHTML

che ti pemette di leggerne e modificarne il contenuto html.

Qui, per esempio

document.getElementById('errore').style.left = Math.floor((screen.width-300)/2);

calcolo la distanza dell'alert personalizzato dal bordo sinistro togliendo la larghezza dell'alert stesso dalla width dello schermo e dividendo per due e il risultato lo assegno allo stile left della solita div errore (cioè dell'alert).

Per personalizzarlo devi studiare un po' di javascript e vedrai che è meno complicato di quanto sembra.

Ciao

**luvicri** · 28-12-2010, 18:31

ok grazie mille.... il funzionamento l'avevo capito! ma dovrò studiare bene il DOM!

Discussione: alert personalizzato

Strumenti discussione

Ricerca discussione

Visualizza

alert personalizzato

Permessi di invio