Hvordan lage et Modal Dialog Over en iFrame

En iframe vinduet gir HTML programmerere med en metode for å vise en annen webside i en hoved container side. For å vise et modalt popup-vinduet over iframe-vinduet, må du programmere iframe for å vise en modal popup. Du kan opprette et modalt vindu ved hjelp av jQuery språk, som er en type av Javascript som brukes til å lage dynamiske sider etter kode belastninger i brukerens nettleser.

Bruksanvisning

1 Høyreklikk på HTML, ASP eller PHP side som viser i iframe. Klikk "Åpne med", og klikk deretter på ditt foretrukne editor.

2 Lag HTML-koden for popup. Lag popup-kode i noen del av websiden, fordi jQuery henter div ID og viser det i midten av iframe vinduet. Skriv inn følgende kode for å lage HTML-koden:

<Div id = "modal">

&lt;b>Modal Window Content&lt;/b> |

& Lt; a href = "#" class = "lukke" onclick = "closeWindow ()"> Close & lt; / a>

& Lt; / div>

3 Tilsett jQuery funksjon for å åpne vinduet. Du kan åpne vinduet automatisk når siden lastes eller når en bruker klikker på knappen. Følgende kode oppretter jQuery funksjon for å åpne og lukke modalt vindu:

funksjon openWindow () {

$ ( '# Modal') fadeIn (1000).;

}

funksjon closeWindow () {

$ ( '# Modal, .window') skjule (.);

}

4 Link popup med en knapp, bilde eller annen div. I dette eksempelet kode, åpnes modalt vindu når brukeren klikker på en knapp:

<Input type = "button" onclick = "openWindow ()">