Et nytt vindu er blokkert i Javascript

De fleste store nettlesere har en funksjon som kalles en pop-up blocker. Hvis popup-blokkering er slått på, vil nettleseren forhindre et nytt vindu fra å åpnes hvis det nye vinduet åpnes automatisk, og er ikke et resultat av en brukerhandling (klikke på en lenke, for eksempel). Når du oppretter en pop-up vindu i Javascript, kontrollere resultatet og skrive kode for å varsle brukeren om å slå av pop-up blokkering hvis mislykket. Du kan også bruke CSS for å skape en illusjon av en pop-up vindu som ikke vil bli blokkert av alle nettlesere.

Varsle brukeren

Sjekk returverdien når du åpner et nytt vindu i Javascript bruke "window.open" metoden. Noen popup-blokkeringer vil forhindre et vindu fra å åpne og returverdien vil være "null". Andre pop-up blokkering vil tillate vinduet for å åpne og vil umiddelbart lukke den. I dette tilfellet er returverdien skal være en gyldig vindu objekt og den "lukkede" egenskap at vinduet vil være sant. Enten eksempel varsle brukeren om at pop-up blocker må være slått av for å bruke programmet. For eksempel:

<Script>
Var wObject;
funksjon popup () {
wObject = window.open (null, "Popup Window", "width = 400, height = 200, resizable, scrollbars = yes, status = 1");
if (wObject === null || wObject.closed) {
alert ( "Vennligst slå av pop-up blocker for å bruke dette programmet!");
}
}
</ Script>

Opprett CSS Window

Det er mulig å skape en illusjon av en pop-up vindu ved hjelp av en Cascading Style Sheet og litt Javascript. Lag en CSS-klasse for pop-up vindu som angir posisjonen til et rektangel på skjermen og fargene grensen, forgrunn og bakgrunn slik at plassen ser ut til å være et pop-up vindu. Still "z-index" verdi høyere enn "1" så plassen vises på toppen av andre HTML-elementer. Sett synlighet i første omgang å "skjult" slik at CSS-vinduet ikke vises. For eksempel:

<Style class = "popup">
position: absolute; venstre: 100; top: 100; bredde: 200; padding: 2 piksler;
border-style: solid; border-width: 2; border-color: black;
background-color: gul; color: blue;
font-family: Arial; font-weight: bold; font-size: 12px;
z-index: 2; synlighet: skjult;
</ Style>

Opprett Javascript Pop-up-funksjoner

Lag to Javascript-funksjoner for å vise og skjule den CSS popup-vindu ved å endre synligheten av objektet fra "skjulte" til "synlig" og vice versa. Før "id" av HTML-elementet som skal inneholde CSS vinduet. For eksempel:

<Script>
funksjon showPopup (id) {
document.getElementById (id) .style.visibility = "visibile";
}
funksjon hidePopup (id) {
document.getElementById (id) .style.visibility = "skjult";
}
</ Script>

Legg CSS Pop-Up til skjermen

Fest CSS popup-vinduet på et objekt på skjermen og sette Javascript-funksjoner til å utføre basert på hvor brukeren kommuniserer med dette objektet. For eksempel plassere et bilde på skjermen, og programmere den til å vise CSS pop-up vindu med litt tekst når brukeren kjører sin musen over bildet. Sett CSS popup-vinduet for å lukke når brukerens mus forlater bildet. Legg ved CSS popup-kode i en relativ "span", slik at det vil rulle med skjermen. For eksempel:

<Span style = "position: relative;">
<Span id = "popup" class = "popup"> Musen er på toppen av dette bildet! ​​</ Span>
<A href = "#" onmouseover = 'showPopup ( "popup");' onmouseout = 'hidePopup ( "popup");'> <img src = "http://example.com/image1.png&quot; alt =" Image "height =" 50 "width =" 50 "> </a>
</ Span>