Hogyan hozzunk létre egy modális ablak tiszta css nélkül javascript, css
Párbeszédablak - ez egy nagyszerű módja annak, hogy egy rövid üzenet vagy információ. Jelenleg a modális ablak egy nagyon népszerű eleme a web design. Ha felvesz egy oldal néhány speciális tartalom, akkor a legjobb, hogy azt egy modális ablak:
Létrehozása CSS modális ablak
Az első dolog, amit meg kell hozzon létre egy egyszerű HTML-kód:
Ne feledje, hogy mi lesz a kizárólag CSS. ahelyett, hogy a modális ablak JQuery. tehát alkalmazni pszeudo választó „: mielőtt a célt.”
Ezután meg kell menteni a teljes tartalmát a modális ablakot. Belül egy div, akkor tesz egy hivatkozást. Becsukja a tartályt, amely levezetjük a CSS segítségével. Akkor tud egy címet több bekezdésnyi szöveget alatta. A HTML-jelölés most így néz ki:
előre beállított stílusok
Most van egy hivatkozás, csomagolva egy div. Akkor folytassa a kinevezését stílusok tartály, hogy ez sokkal praktikusabb. Először hozzon létre egy modális osztály egy modális ablak CSS. Számára, az általunk használt pseudo: mielőtt:
Készítünk egy modális ablak. meghatároz egy fix helyzetben neki. Ez lefelé mozog, amikor a felhasználó görgeti az oldalt.
Ezen kívül, mi meg a felső, jobb, alsó és bal szélén a nulla értéket a sötét háttér lefedi a teljes képernyőt. Most be kell állítani a háttér, a határ sugár .modal-dialógus. valamint egy fix helyzetben. A CSS kódot az alábbiak lesznek:
Ezután meg kell állítania a modális dialógus lefordítani tulajdonsága 0-ra Itt is meg a top 20%:
Íme néhány stílust, amit használni kíván modális ablak nézett szép:
Most, hogy van beállítva HTML stílusok modális ablak és tette funkcionális, továbbra is a számunkra, hogy hozzon létre egy gombot a jobb alsó sarokban. CSS kód: