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">
<b>Modal Window Content</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 ()">