Jednoduché modální okno.

 2012-06-26 00:00:00
 Dmitry Burobin

V tomto článku Vám povím, jak se dá udělá modální okno pomocí jQuery knihovny.

Co budeme potřebovat:

1) jQuery knihovnu, kterou si můžete stáhnout z oficiálního webu jQuery a nebo z archivu s tímto článkem.

2) Asi 15 minut volného času =)

HTML.

Uděláme modální okno s formulářem. Zaprvé vytvořime odkaz, který se bude odkazovat na modální okno, takže pří kliknutí na něj se nám objeví okno.

<a href="#form" name="modal">
    
Modální okno.
</
a>
A vytvoříme samotné okno. Nebudu ho popisovat, kdyby jste něčemu nerozuměli, tak napište v komentářich.

<div id="boxes">    
        <
div id="form" class="window insideWindow">
            <
div class="close" id="closeButton"></div>
            <
div class="title"><strong>Zanechat komentář</strong></div>
                <
form id="formID" class="formular" method="POST" action="">
                    <
div class="">
                        <
div class="label"><label for="name">Jméno:<label></div>
                        <
input class="input" type="text" name="name">
                        <
div class="label"><label for="message">Komentář:</label></div>
                        <
textarea class="textarea" name="message"></textarea>
                        <
div class="button" >
                        <
input class="submit" type="submit" name="poslat" value="Odeslat">
                        </
div>
                    </
div>
                </
form>
        </
div>
</
div>

 <
div id="mask"></div>

CSS.

Přidáme kaskádové styly.

//zpočátku je maska schovaná
#mask{
  position:absolute;
  left:0;
   top:0;
  z-index:9000;  
  background-color:#fff;
  display:none;
}
 //a samotné okno taktéž je schované
#boxes .window{
  position:fixed;
  left:0;
  top:0;
  width:440px;
  min-height:350px;
  display:none;
  z-index:9999999;
  padding:20px;
}

//Vnitřek okna 
#boxes .insideWindow{
  width:375px; 
  min-height:353px;
  max-height:420px;
  padding:20px;
  padding-top:30px;
  background-color:#ffffff;
  z-index:9999999;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  -webkit-box-shadow:0 1px 2px 2px rgba(0,0,0,0.5);
  -moz-box-shadow:0 1px 2px 2px rgba(0,0,0,0.5);
  box-shadow:0 1px 2px 2px rgba(0,0,0,0.5);
  behavior: url(PIE/PIE.htc);
}

//tlačítko pro schovávání okna
#boxes #closeButton{
	background:url(close.png) no-repeat;
	display:block;
	position:absolute;
	top:-10px;
	right:-10px;
	width:24px;
	height:24px;
	outline:none;
	cursor:pointer;
}

//Dál už jsou jenom doplňkové styly
.title{
	text-align:center;
	font-size:13pt;
	padding-bottom:5px;
	margin-bottom:5px;
	border-bottom:1px dashed #ccc;
}
.form input, .form textarea{
	display : block;
	margin-bottom: 5px;
}
.input{
	width: 250px;
	color: #555;
	padding: 5px;
	border: 1px solid #B5B8C8;
	font-size: 14px;
	margin-top: 4px;
	z-index:9999;
}
.textarea{
	width: 95%;
	height:150px;
	color: #555;
	padding: 4px;
	margin-bottom:4px 0 10px 0;
	border: 1px solid #B5B8C8;
	font-size: 14px;
	z-index:9999;
}

.button{
	
	margin:10px auto;
	text-align:right;
	height:40px;
}
.button input{
	width:120px;
	height:40px;
	padding:5px;
	color:#000;
	position:absolute;
	right:25px;
	font-size:12pt;
}
.label{
	font-size:13pt;
	font-weight:400;
	cursor:none;
	margin:5px auto;
}

Tyto styly můžete umístit buď do samostatného souboru nebo přimo do indexu.

jQuery.


<script type="text/javascript">

$(
document).ready(function(){

//vyber všechny tagy "a", u kterých jméno se rovná "modal"
    
$('a[name=modal]').click(function(e) {
//tato funkce řekne, že to není odkaz a
//nikam nebudeme přesměrování
    
e.preventDefault();
//zapišeme hodnotu atributu href do proměnné
    
var id = $(this).attr('href');
    
//určime šířku a délku obrazovky
    
var maskHeight = $(document).height();
    var 
maskWidth = $(document).width();
    
//Aplikujeme tyto hodnoty na naši masku, aby vyplnita celou obrazovku
    
$('#mask').css({'width':maskWidth,'height':maskHeight});
        
//Použijeme efekt fadeIn (maska se nám zobrazi na obrazovce)    
    
$('#mask').fadeIn(1000);    
//a nastavime průzračnost, tím dostaneme efekt
//zatemění obrazovky
    
$('#mask').fadeTo("slow",0.4);
    
//určime šířku a délku okna
    
var winH = $(window).height();
    var 
winW = $(window).width();
              
//umístime okno uprostřed
    
$(id).css('top',  winH/2-$(id).height()/2);
    $(
id).css('left'winW/2-$(id).width()/2);
    
//a zase použíjeme efekt fadeIn pro zobrazení okna
    
$(id).fadeIn(2000); 
    
});
    
//když zmačknete tlačítko "zavřit"
    
$('.window .close').click(function (e) {
        
//přednastavíme, že se nikam nechceme přesměrovávat
        
e.preventDefault();
        
//maska se schová
        
$('#mask, .window').hide();
    });        
    
//jestli kliknete na masku
    
$('#mask').click(function () {
        
//tak se okno a maska schová
        
$(this).hide();
        $(
'.window').hide();
    });    

});
</script>

A máme krásné modální okno.

Poznamka: V případě, že potřebujete načíst různý kontent, musíte měnit parametr id tady
<div id="form" class="window insideWindow">
Systém Orphus
Napište komentář.
Celkem komenrářů(37)
Guestaceta - 2017-11-17  13:05:34
 guest test post
[url=http://gdhyuei23kol.com/]bbcode[/url]
html
http://gdhyuei23kol.com/ simple
ScottHoawl - 2017-11-17  08:19:16
 Hello. http://jakshgy773733.us
Jeffpoonia - 2017-11-16  18:25:14
 Ove
ight Cephalexin Online [url=http://genericcial.com ]cialis[/url] Happy Male Viagra Cos E Il Viagra
Jeffpoonia - 2017-11-16  18:25:12
 Ove
ight Cephalexin Online [url=http://genericcial.com ]cialis[/url] Happy Male Viagra Cos E Il Viagra
Jeffpoonia - 2017-11-16  18:25:11
 Ove
ight Cephalexin Online [url=http://genericcial.com ]cialis[/url] Happy Male Viagra Cos E Il Viagra
Jeffpoonia - 2017-11-16  18:25:09
 Ove
ight Cephalexin Online [url=http://genericcial.com ]cialis[/url] Happy Male Viagra Cos E Il Viagra
Ronweix - 2017-11-09  03:05:35
 Misoprostol Online Trusted Pharmacy Tadalafil Cialis Generico [url=http://via50mg.com]online pharmacy[/url] Propecia Es No Voy A Salir Que Proscar
Ronweix - 2017-11-09  03:05:34
 Misoprostol Online Trusted Pharmacy Tadalafil Cialis Generico [url=http://via50mg.com]online pharmacy[/url] Propecia Es No Voy A Salir Que Proscar
Ronweix - 2017-11-09  03:05:33
 Misoprostol Online Trusted Pharmacy Tadalafil Cialis Generico [url=http://via50mg.com]online pharmacy[/url] Propecia Es No Voy A Salir Que Proscar
Ronweix - 2017-11-09  03:05:32
 Misoprostol Online Trusted Pharmacy Tadalafil Cialis Generico [url=http://via50mg.com]online pharmacy[/url] Propecia Es No Voy A Salir Que Proscar
Ronweix - 2017-10-25  12:26:43
 Cialis 20 Mg 1 Tableta [url=http://genericcial.com]cialis[/url] Comment Durer Plus Longtemps Cours
Ronweix - 2017-10-17  00:12:26
 Canada Prescriptions No Supplements With Amoxicillin [url=http://cheapvia50mg.com]viagra[/url] Viagra Achat Quebec
Ronweix - 2017-10-17  00:12:25
 Canada Prescriptions No Supplements With Amoxicillin [url=http://cheapvia50mg.com]viagra[/url] Viagra Achat Quebec
Ronweix - 2017-10-17  00:12:24
 Canada Prescriptions No Supplements With Amoxicillin [url=http://cheapvia50mg.com]viagra[/url] Viagra Achat Quebec
Ronweix - 2017-10-17  00:12:23
 Canada Prescriptions No Supplements With Amoxicillin [url=http://cheapvia50mg.com]viagra[/url] Viagra Achat Quebec
Ronweix - 2017-10-13  21:52:07
 Zyban Without Prescription On Clearance Cialis Qualite Vipro Lifescience Tadalafil [url=http://cheapviafast.com]viagra[/url] Topical Keflex
Ronweix - 2017-10-13  21:52:06
 Zyban Without Prescription On Clearance Cialis Qualite Vipro Lifescience Tadalafil [url=http://cheapviafast.com]viagra[/url] Topical Keflex
Ronweix - 2017-10-13  21:52:05
 Zyban Without Prescription On Clearance Cialis Qualite Vipro Lifescience Tadalafil [url=http://cheapviafast.com]viagra[/url] Topical Keflex
Ronweix - 2017-10-13  21:52:04
 Zyban Without Prescription On Clearance Cialis Qualite Vipro Lifescience Tadalafil [url=http://cheapviafast.com]viagra[/url] Topical Keflex
Ronweix - 2017-10-04  15:44:00
 Mail Order Real Elocon Mastercard Accepted Como Comprar Finasteride Propecia Direct Worldwide Levaquin Canada Best Buy Shop Mastercard [url=http://cialtobuy.com]buy cialis[/url] Fairy Pharmacy Levitra Nl Order now on line isotretinoin medicine fedex shipping
[1] [2] 
*v komentářich nesmíte používat sprostá slova a odkazy!!!Děkuji za pochopeni.