Una nuova finestra è bloccato in JavaScript

October 26

La maggior parte dei principali browser hanno una caratteristica chiamato un blocco dei pop-up. Se il blocco dei pop-up è attivata, il browser impedirà una nuova finestra venga aperta se la nuova finestra si apre automaticamente e non è il risultato di un'azione utente (cliccando su un link, per esempio). Ogni volta che si crea una finestra pop-up in JavaScript, controllare il risultato e scrivere il codice per richiedere all'utente di disattivare il blocco dei pop-up in caso di insuccesso. È inoltre possibile utilizzare i CSS per creare l'illusione di una finestra pop-up che non sarà bloccato da qualsiasi browser.

Avverte l'utente

Controllare il valore di ritorno ogni volta che si apre una nuova finestra in JavaScript utilizzando il metodo "window.open". Alcuni blocco dei pop-up saranno impediscono una finestra di aprire e il valore di ritorno sarà "null". Altri blocco dei pop-up permetterà alla finestra per aprire e saranno immediatamente chiuderlo. In questo caso il valore di ritorno sarà un oggetto finestra valida e la proprietà "chiuso" di tale finestra sarà vero. In entrambi i casi, avverte l'utente che il blocco pop-up deve essere disattivato per poter utilizzare l'applicazione. Per esempio:

<Script>
var wObject;
funzione popup () {
wObject = window.open (null, "un'altra finestra", "width = 400, height = 200, ridimensionabile, barre di scorrimento = yes, status = 1");
if (wObject === nullo || wObject.closed) {
alert ( "Si prega di spegnere il pop-up blocker per utilizzare questa applicazione!");
}
}
</ Script>

Creare Finestra CSS

E 'possibile creare l'illusione di una finestra pop-up utilizzando un foglio di stile CSS e alcuni JavaScript. Creare una classe CSS per la finestra pop-up che specifica la posizione di un rettangolo sullo schermo e colori il confine, primo piano e sfondo in modo che la piazza sembra essere una finestra pop-up. Impostare il valore "z-index" superiore a "1", così appare la piazza in cima altri elementi HTML. Impostare la visibilità inizialmente per "nascosto" in modo che la finestra di CSS non viene visualizzata. Per esempio:

<Class style = "popup">
position: absolute; sinistra: 100; top: 100; width: 200; padding: 2px;
border-style: solido; border-width: 2; border-color: black;
background-color: yellow; colore blu;
font-family: Arial; font-weight: bold; font-size: 12px;
z-index: 2; visibility: hidden;
</ Style>

Creare JavaScript pop-up Funzioni

Creare due funzioni JavaScript per mostrare e nascondere la finestra pop-up CSS cambiando la visibilità dell'oggetto da "nascosto" a "visibile" e viceversa. Passare il "id" dell'elemento HTML che conterrà la finestra CSS. Per esempio:

<Script>
Funzione ShowPopup (id) {
document.getElementById (id) .style.visibility = "visibile";
}
Funzione hidePopup (id) {
document.getElementById (id) .style.visibility = "hidden";
}
</ Script>

Aggiungere CSS Pop-Up alla schermata

Fissare la finestra pop-up CSS a un oggetto sullo schermo e impostare le funzioni JavaScript da eseguire in base a come l'utente interagisce con quell'oggetto. Ad esempio, inserire un'immagine sullo schermo e programmarlo per visualizzare la finestra pop-up CSS con un testo quando l'utente esegue il suo mouse sull'immagine. Impostare la finestra pop-up CSS per chiudere quando il mouse dell'utente lascia l'immagine. Racchiudere il codice CSS pop-up in un "arco" relativo in modo che possa scorrere con lo schermo. Per esempio:

<Span style = "position: relative;">
<Span id = "pop-up" class = "popup"> Il mouse è in cima a questa immagine! </ Span>
<A href = "#" onMouseOver = 'ShowPopup ( "pop-up");' onmouseout = 'hidePopup ( "pop-up");'> <img src = "http://example.com/image1.png&quot; alt =" Immagine "height =" "width =" 50 50 "> </a>
</ Span>