Hvordan lage en Modal

May 28

Modale vinduer er en ny og lite påtrengende måte å vise popup-innhold på websidene. Lag modale vinduer for å tilby påmeldingsskjemaer, vise bilder i full størrelse, vise bekreftelsesmeldinger eller vise noe innhold du ønsker. Modals utmerke seg i sin design fleksibilitet; Innholdet er fløt over den overordnede webside ved hjelp av en overlay effekt, og elementet i modal kan bli stylet en rekke måter. Det finnes flere ferdiglagde scripts og plugins som kan implementeres i HTML eller content management system, men du kan lage en rask og enkel modal kun ved hjelp av CSS3 og HTML5.

Bruksanvisning

1 Åpne en tekst eller HTML editor og opprette et nytt tomt dokument. Skriv inn HTML5 "doctype" tag:

<! DOCTYPE html>

Legg de grunnleggende koder for dokumentstruktur for å opprette en tom mal:

<Head>

</ Head>

<Body>

</ Body>

</ Html>

2 Lag din innhold HTML. For hensikten med dette eksempelet, kan du ha en enkel beholder med litt tekst og noen miniatyrbilder for å lage en mini-galleri:

<Header> Galleri Eksempel </ header>

<article class="description">

Klikk på hvert miniatyr å se en større versjon.

& Lt; / artikkel>

& lt; div id = "gallery_thumbs">

& Lt; img alt = "1" />

& Lt; img alt = "2" />

& Lt; img alt = "3" />

& Lt; / div>

</ Avsnitt>

</ Div>

3 Lag din modal ved å legge til en annen DIV under beholderen DIV. Gi denne DIV en unik ID som skal brukes til å koble til modal, og en klasse som skal brukes til å style den. For dette eksempelet, ville du opprette tre modals, en for bilde hver i full størrelse. Sett bildet i full størrelse i DIV og koble hver enkelt ved å tildele URL til "#Lukk" anker. Dette vil gi betrakteren å bare klikk på bildet for å lukke modal:

</ Div>

</ Div>

</ Div>

4 Lag lenker ut av dine miniatyrbilder ved å innkapsle dem i "a href" tag. Du åpner bildet i full størrelse i modal, må du stille inn nettadressen til hver kobling som anker eller ID definert i tilsvarende modal DIV:

<a href="#img1"><img alt="1"/></a>

& Lt; a href = "# img2"> & lt; img alt = "2" /> & lt; / a>

& Lt; a href = "# img3"> & lt; img alt = "3" /> & lt; / a>

& Lt; / div>

5 Plasser markøren under "<head>" tag og gå inn i "stil" tag:

<Style>

</ Style>

CSS-stiler for elementer og modal containere vil bli plassert her. Du kan eventuelt sette dem inn i en egen "style.css" dokument og knytte stilark i HTML i stedet. For å opprette modal effekt, må modal klasse i det minste ha en posisjon av "absolutt", en høy "z-index", og en "display: none" attributt:

.modal

{

width: 100%;

height: 100%;

position: absolute;

top: 0;

venstre: 0;

display: none;

z-index: 999;

bakgrunn: RGBA (0,0,0,0.5);

-webkit-animasjon-varighet: 1s;

-webkit-animasjon-navn: visne;

-webkit-animasjon-iterasjon-count: 1;

-webkit-animasjon-retning: normal;

}

Å style "close" linken, legge til en stil for "en" tag:

.modal en

{

display: block;

vertikal-align: right;

text-align: center;

}

For å lage en fancy stil ramme eller "Polaroid" effekt, legge til en stil for "img" tag:

.modal img

{

padding: 5px 5px 45px 5px;

bakgrunn: #ffffff;

-webkit-box-shadow: 0px 0px 15px # 444;

-moz-box-shadow: 0px 0px 15px # 444;

-webkit-animasjon-varighet: 0.50s;

-webkit-animasjon-navn: vokse;

-webkit-animasjon-iterasjon-count: 1;

-webkit-animasjon-retning: normal;

-webkit-animasjon-timing-funksjon: brukervennlighet inn;

}

6 Legg en mer stil for din "modal" class bruke ": target" pseudo velgeren. Denne bryteren gjør det mulig å angi målet URL til en lenke for å vise innholdet i et skjult element, som i dette tilfellet er modal container.

.modal: target {

display: table;

height: 100%

}

Fortsett å legge til noen ekstra stiler for miniatyrbilder eller innhold som du ønsker. Lagre filene og forhåndsvise dem i nettleseren din for å se resultatene.

Hint

For å vise innhold i stedet for et bilde, endre ".modal img" stil til ".modal.content" og gi innholdet DIV en klasse av "innhold":
<Div id = "dialog1" class = "modal">
<Div class = "content">
Dette er et eksempel på en dialog modal.
<a href="#close"> OK </a>
</ Div>
</ Div>