Modalinis dialogo langas [CSS & jQuery]

Paskelbė | 01/04/2012 | Kategorija: CSS, jQuery | Komentarų nėra

Grafinėje vartotojo sąsajoje (interface) modaliniu yra vadinamas langas (kuris yra child element), kuris blokuoją vartotojo darbą su tėviniais elementais iki tol, kol vartotojas neuždarys šio lango.

Taigi štai tokia sąvoka yra, kurią dabar ir įgyvendinsim.

Dažniausiai modaliniais būna dialogo langai, kitaip tariant tai yra kažkokią kontaktų arba autorizacijos forma ir panašiai. Taip pat jie yra naudojami šiaip, kad pariškinti kažkokį dalyką.

Modalinio lango fonas (modal window background)

Taigi reikia sukurti foną, kuris blokuos visus elementus. Tai padaryti nėra sunku:

  1. užduodama fiksuota pozicija
  2. sukuriamas fonas rgba funkcijos pagalba
  3. užduodamos išmeros („width“ ir „height„)
  4. užduodami atitraukimai nuo kraštų („top“ ir „left„)
  5. užduodama html steko pozicija
1
2
3
4
5
6
7
8
9

#modal_window_background {
	position: fixed;
	background: rgba(0,0,0,.8);
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index: 100;
}

Taigi gavosi visai toks neblogas užtamsintas langas, kuris „permuša“ visus elementus – to ir reikėjo.

Modalinis dialogo langas

O dabar reikia ant katik sukurto fono vistiek išvesti kažkokį tekstą, tą ir darome:

  1. užduodama didesnė html steko pozicija, nei fono
  2. užduodamas fonas
  3. užduodama pozicija
  4. užduodama vidurine pozicija ir atitraukimas nuo kairiojo krašto („left“ ir „margin-left„)
  5. užduodamas atitraukimas nuo viršutinio krašto
  6. užduodamas nedidelis atitraukimas nuo viršaus
  7. užduodami apvalus kampai
1
2
3
4
5
6
7
8
9
10
11
12

#modal_window {
	z-index:101;
	background: #eee;
	position: absolute;
	left: 50%;
  	margin-left: -200px;
  	top:30%;
  	padding: 10px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

Uždarymo mygtukas

Uždarymo mygtukui naudosiu dauginimo ženklą ×, kurį irgi truputi pagražinsiu:

  1. užduodama absoliuti pozicija
  2. užduodama pozicija atitraukiant nuo viršaus ir dešines
  3. užduodama raudona spalva
  4. užduodamas dydis
  5. užduodamas bold’as
  6. užduodamas kursorius
1
2
3
4
5
6
7
8
9

.close_button{
	position: absolute;
	top: -7px;
	right: 3px;
	color: #ac1219;
	font-size:22pt;
	font-weight: bold;
	cursor:pointer;
}

Taigi gavosi toks dalykas (siųntimo forma yra pridėta kaip pavyzdys)

Kodas

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<style type="text/css">
#modal_window_background {
	position: fixed;
	background: rgba(0,0,0,.8);
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index: 100;
}
#modal_window {
	z-index:101;
	background: #eee;
	position: absolute;
	left: 50%;
  	margin-left: -200px;
  	top:30%;
  	padding: 10px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color: #000000;
}
 
.close_button{
	position: absolute;
	top: -7px;
	right: 3px;
	color: #ac1219;
	font-size:22pt;
	font-weight: bold;
	cursor:pointer;
}
</style>
<div id="modal_window_background"></div>
<div id="modal_window">
	<a class="close_button" style="text-decoration:none;">&#215;</a>
	<h1><a href="http://apieviska.info">ApieViska.Info</a></h1>
</div>

jQuery naudojimas

Taigi dabar liko sužaisti su jQuery, kad veiktu įjungimo ir išjungimo mygtukai. Tam pirmiausia reikia ištrinti fono div’ą (modal_window_background) iš html’o ir prie stiliaus modal_window pridėti display: none;.

O dabar paspaudimu rodome langą:

1
2
3
4
5

$('.show_window').click(function(){
	$('body').after('<div id="modal_window_background"></div>');
	$('#modal_window').append('<a class="close_button" style="text-decoration:none;">&#215;</a>')
	$('#modal_window').show(500);
});

Ir paspaudimu slepiame langą:

1
2
3
4

$('.close_button').click(function(){
	$('#modal_window').hide(500);
	$('#modal_window_background').remove();
});
Galutinis variantas

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('.show_window').click(function(){
		$('body').after('<div id="modal_window_background"></div>');
		$('#modal_window').append('<a class="close_button" style="text-decoration:none;">&#215;</a>')
		$('#modal_window').show(500);
    });
 
    $('.close_button').live('click',function(){
        $('#modal_window').hide(500);
        $('#modal_window_background').remove();
    });
})
</script>
 
<style type="text/css">
#modal_window_background {
	position: fixed;
	background: rgba(0,0,0,.8);
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index: 100;
}
#modal_window {
	z-index:101;
	background: #eee;
	position: absolute;
	left: 50%;
  	margin-left: -200px;
  	top:30%;
  	padding: 10px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color: #000000;
	display: none;
}
 
.close_button{
	position: absolute;
	top: -7px;
	right: 3px;
	color: #ac1219;
	font-size:22pt;
	font-weight: bold;
	cursor:pointer;
}
</style>
 
<a class="show_window" style="cursor:pointer;">show</a>
 
<div id="modal_window">
	<h1><a href="http://apieviska.info">ApieViska.Info</a></h1>
</div>

Žymos: , , , , , , , , ,

Susiję Įrašai:

Skirtumas tarp parent(), parents(), closest() [jQuery] Skirtumas tarp parent(), parents(), closest() [jQuery]
Selector’iai (kreipiniai) [jQuery] Selector’iai (kreipiniai) [jQuery]

Palikite komentarą

Rašyti komentarą
© 2013 Viskas Apie Viską. All rights reserved. XHTML / CSS Valid.
Proudly designed byTheme Junkie.