Most úgy gondoltam, hogy megint valamilyen rendhagyú cikket írok. Egycsapásra dokumentálom, amit csinálok és fel fogom használni a Linuxfórum szolgáltatásaihoz is, ha eljutok odáig.

Bizonyára sokakban felmerült a kérdés, hogy mi van akkor, ha az “alert” már nem elég. Akkor használhatjuk a “window.open” függvényt is. Ebben az esetben persze külön nyűg a külön ablak, a nem saját magunk által beállított keret és a változók átadása. Ráadásul az ablakunk nem lesz olyan stílusú, ami beleolvadna a környezetébe.

Van más lehetőség is. Letölthetünk egy pár előre megírt profi megoldást is, de sokkal izgalmasabb, ha magunk írunk egy ilyen ablakkezelőt. Nos, ez a cikk egy ilyen lehetőség megvalósításával foglalkozik. Nos, ha az eredmény sárgább és savanyúbb lesz, akkor is a miénk lesz.

A képen az alább tárgyalandó stíluslappal készült javascript ablak képe látható firefox böngészőben. Természetesen a böngészőkben némi képpen eltérően jelenik meg. A megjelenést tovább lehet finomítani, ha a gombokat is magunk csináljuk. Én most ezt nem tettem meg.

Az ablaknak a méretei változtathatóak, csakúgy mint a gombok, vagy az ikon, vagy épp a cím. A tartalomhoz, pedig – csakúgy, mint a “nagy társainál” – igazodik a scrollbar. Ezen felül úgy készült el a script, hogy könnyen lehet többnyelvű.

Először is kezdjük a saját stíluslapunk fontosabb részleteinek ismertetésével.
{code type=css}div.DialogClass{
display: none;
position: absolute;
background-color: #DEE0E5;
border: 2px outset #D0D2D5;
padding: 1px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
-box-sizing: border-box;

border-radius: 6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
-moz-box-shadow: 10px 10px 10px #CCC;
-webkit-box-shadow: 10px 10px 10px #CCC;
}{/code}

• A “display:none” eldugja aaz ablakunkat. Erre azért van szükség, mert magába az aktív kódba van beillesztve és így érhetjük el, hogy adott esetben megjelenjen, vagy eltünjön. (Ezt később fogjuk megváltoztatni.)
• A “position: absolute” szintén szükséges, mert akarjuk, hogy az ablakunk ott jelenjen meg, ahol “deklaráljuk”, hanem egy tetszőleges helyen.
• Az első blokk többi adata a háttérszínt, keretet stb. adja meg.
• A böngésző függő “box-sizing” szintén szükséges, mert ez lesz a ablak dobozunk és a méretét pontosan szeretnénk megadni, azaz azt akarjuk elérni, hogy a keret, padding is benne legyen.
• Az utolsó blokk a sarkok kerekítésének és az árnyék megrajzolásának a beállítását végzi.

{code type=css}div.DialogClass div.TitleBar{
display: table;
height: 40px;
margin: 2px;

border-radius: 5px;
padding: 2px 3px;
border: 2px groove #D0D2D5;
background-color: #BBC6D0;
vertical-align: middle;

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
-box-sizing: border-box;
}{/code}

Hasonló módon szerkesztjük meg a keret címsorának stílusát, de itt a megjelenítést táblázatra állítjuk, mert egymás mellé különböző elemeket helyezünk, melyeknek ki kell tölteni a helyet és ezt táblázattal érjük el legegyszerűbben.

A magasságnak pontos méretet adunk meg, mert később majd szeretnénk tudni, hogy mekkora lesz. Itt a keret nem “outset”, hanem “groove” típusú lesz és a dobozunk külseje és belseje között is hagyunk el helyet, mellyel elérjük ezt a színes beljebb kezdődő belsőt, valamint, hogy a belül lévő elemek ne tapadjanak rá a keretünkre. És természetesen azt szeretnénk, ha a belső elemek középen lennének és nem felül.

{code type=css}div.DialogClass div.TitleBar div.Icon{
width: auto;
display: table-cell;
vertical-align: middle;
}
div.DialogClass div.TitleBar div.Button{
width: auto;
display: table-cell;
vertical-align: middle;
}
{/code}

A bal oldali ikon, valamint a jobb oldali gombok szélességét automatára állítjuk a megjelenítését pedig cellára.

{code type=css}div.DialogClass div.TitleBar div.Label{
display: table-cell;
width: 100%;
vertical-align: middle;
padding: 0 2px;
}{/code}

Az ablak címét pedig 100%-os szélességűre nyújtjuk. Mivel táblázatunk van, ezért a két mellette lévő gomb nem fog a következő sorba automatikusan lecsúszni. Amennyiben ennek a méretét is számolnánk, akkor megoldhatnánk, hogy tetszőleges hosszúcímet adjunk meg, ami rövidül, amennyiben tiltjuk a sortörést is. De ezt most hagyjuk.

{code type=css}div.DialogClass div.ButtonBar{
display: block;
height: 60px;
text-align: center;
padding: 5px;

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
-box-sizing: border-box;
}
{/code}

Az alsó gomsort már középre helyezzük és ismét fix méretet állítunk be.

{code type=css}div.DialogClass div.ContentBar{
display: block;
border: 2px groove #D0D2D5;
background-color: #EDF0F3;
padding: 2px;
overflow: auto;

border-radius: 5px;
margin: 2px;

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
-box-sizing: border-box;
}{/code}

A tartalom méretét nem tudjuk előre és nem is növelhetjük 100%-ra, hisz, akkor az ablakunk magassága is változna. De, ha a tartalomhoz igazítjuk, akkor pedig vagy – az előzőekhez hasonlóan – nőni fog az ablakunk mérete, vagy a keret lesz kicsi. Mi viszont állandó maximális méretű keretet akarunk, mert az néz ki jól. Ezért számoljuk (majd látni fogjuk, hogy az nem olyan egyszerű), és amikor már tudjuk, hogy mekkora maximális helyet foglalhat el, akkor az “overflow:auto” elintézi nekünk, hogy vagy legyen scrollbar, vagy ne.

Nos akkor ennyit a stíluslapról és legközelebb jön a javascript kód is.

Ez a cikk és a jövendőbeli társai elérhetőek a “hasznos scriptek” linken, a dokumentációk menüpont almenüpontjaiban is.