| Przedstawiam wam okienko, które pojawia się po kliknięciu. Jego zastosowania są ogromne, wszystko zależy od waszej wyobraźni. Możecie w nim umieszczać różne elementy: zwykłe divy, chat, tabelki, taby itd. Instrukcja ta bazowana jest na chacie autorki bloga manvspixel.pl |
demo 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat.
zamknij
demo 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat.
zamknij
demo 3
Witaj!To okienko może służyć również jako intro na stronie głównej. x |
|---|
Krok 1.
Wchodzimy w układ i dodajemy gadżet HTML/JavaScript, gdzie wklejamy poniższy kod. Możecie dowolnie zmieniać pomarańczowe napisy.
<div id="okno-open"> Napis </div>
<div id="okno">
<div id="okno-txt" style="width: 50%">
Tekst
<span id="okno-close"> zamknij </span>
</div>
</div>
<div id="okno">
<div id="okno-txt" style="width: 50%">
Tekst
<span id="okno-close"> zamknij </span>
</div>
</div>
Krok 2.
Wchodzimy w szablon, następnie klikamy "edytuj kod HTML". Wyszukujemy </head> i pod nim wklejamy kod, który znajduje się poniżej.
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(function() {$('#okno-open').click(function() {$('#okno').fadeToggle(500);});});
$(function() {$('#okno-close').click(function() {$('#okno').fadeOut(500);});});
</script>
<script type='text/javascript'>
$(function() {$('#okno-open').click(function() {$('#okno').fadeToggle(500);});});
$(function() {$('#okno-close').click(function() {$('#okno').fadeOut(500);});});
</script>
Krok 3.
Zapisujemy i wchodzimy w "dostosuj" -> dodaj arkusz CSS.
Demo 1
/* napis */
#okno-open {
position:absolute;
top: 150px;
left: 40%;
cursor: pointer;
display: inline-block;
color: #000;
text-align: center;
font-weight: bold;
font-size: 13px;
text-transform: uppercase;
z-index: 2482161512671; /* by napis był zawsze na wierzchu */
}
/*okienko*/
#okno-txt {
position: fixed; /* aby okienko było nieruchome */
top: 35%;
left: 25%;
display:block;
background: #111; /* tło okienka */
color: #666;
font-size:12px;
padding:4px 10px 10px 10px;
text-align:justify;
width: 50%; /*szerokość*/
}
/*przycisk zamknij*/
#okno-txt span {
position:absolute;
bottom: -20px;
right: -10px;
text-align: center;
font-size:12px;
cursor:pointer;
background:#dd4711; /*tło*/
color: #000;
padding: 10px 15px;
}
/*tło okienka*/
#okno {
position: fixed; /* aby tło było nieruchome */
bottom: 0px;
left: 0px;
width: 100%; /*szerokość*/
height: 100%; /*wysokość*/
background: rgba(00,00,00,0.8); /* kolor tła, możecie zamiast tego dać background: #000; */
display: none;
z-index: 999999999999999999999999999; /* by okienko było zawsze na wierzchu */
}
#okno-open {
position:absolute;
top: 150px;
left: 40%;
cursor: pointer;
display: inline-block;
color: #000;
text-align: center;
font-weight: bold;
font-size: 13px;
text-transform: uppercase;
z-index: 2482161512671; /* by napis był zawsze na wierzchu */
}
/*okienko*/
#okno-txt {
position: fixed; /* aby okienko było nieruchome */
top: 35%;
left: 25%;
display:block;
background: #111; /* tło okienka */
color: #666;
font-size:12px;
padding:4px 10px 10px 10px;
text-align:justify;
width: 50%; /*szerokość*/
}
/*przycisk zamknij*/
#okno-txt span {
position:absolute;
bottom: -20px;
right: -10px;
text-align: center;
font-size:12px;
cursor:pointer;
background:#dd4711; /*tło*/
color: #000;
padding: 10px 15px;
}
/*tło okienka*/
#okno {
position: fixed; /* aby tło było nieruchome */
bottom: 0px;
left: 0px;
width: 100%; /*szerokość*/
height: 100%; /*wysokość*/
background: rgba(00,00,00,0.8); /* kolor tła, możecie zamiast tego dać background: #000; */
display: none;
z-index: 999999999999999999999999999; /* by okienko było zawsze na wierzchu */
}
Demo 2
#okno-open {
cursor:pointer; display:inline-block; color: #be4509; width:150px; text-align:center; font-family:arial; font-size:10px; text-transform:uppercase; margin-right:-25px ; -webkit-transition-duration: .50s; margin-top:3px; right: 1%; bottom: 1%; z-index: 2482161512671; }
#okno-txt {
display:block; background: rgba(00,00,00,0.7); padding:10px; position: fixed; top: 40%; left: 25%; color: #fff; text-transform: uppercase; text-align: center; font-family:arial; font-size:10px; }
#okno-txt span{
float: center; font-size:12px; cursor:pointer; display:block; }
#okno {
position: fixed; bottom: 0px; left: 0px; width: 100%; height: 100%; background: rgba(00,00,00,0.8); z-index: 24821615126716; display: none; }
cursor:pointer; display:inline-block; color: #be4509; width:150px; text-align:center; font-family:arial; font-size:10px; text-transform:uppercase; margin-right:-25px ; -webkit-transition-duration: .50s; margin-top:3px; right: 1%; bottom: 1%; z-index: 2482161512671; }
#okno-txt {
display:block; background: rgba(00,00,00,0.7); padding:10px; position: fixed; top: 40%; left: 25%; color: #fff; text-transform: uppercase; text-align: center; font-family:arial; font-size:10px; }
#okno-txt span{
float: center; font-size:12px; cursor:pointer; display:block; }
#okno {
position: fixed; bottom: 0px; left: 0px; width: 100%; height: 100%; background: rgba(00,00,00,0.8); z-index: 24821615126716; display: none; }
Demo 3
By okienko pojawiało się tylko na stronie głównej dodaj ten kod nad </body>
<b:if cond='data:blog.url == "adres twojego bloga"'>
<div id='okno-open'> Demo 1 </div>
<div id='okno'>
<div id='okno-txt' style='width: 100%;'>
<h1>Witaj!</h1>
To okienko może służyć również jako intro na stronie głównej.
<span id='okno-close'>x</span>
</div>
</div>
<style type='text/css'>
#okno-txt {
display:block; padding:10px; position: fixed; top: 40%; color: #fff; text-align: center; font-size:14px; }
#okno-txt span {
position:fixed; top:20px; left: 20px; text-align:center; font-size:24px; font-weight:bold; cursor:pointer; }
#okno-open {
position:absolute; top: 150px; left:45%;
cursor:pointer; display:inline-block; color: #000; text-align:center; font-weight:bold; font-size:13px; text-transform:uppercase; z-index: 2482161512671; }
#okno {
position: fixed; bottom: 0px; left: 0px; width: 100%; height: 100%; background: rgba(00,00,00,0.8); z-index: 24821615126716; }
</style>
</b:if>
<div id='okno-open'> Demo 1 </div>
<div id='okno'>
<div id='okno-txt' style='width: 100%;'>
<h1>Witaj!</h1>
To okienko może służyć również jako intro na stronie głównej.
<span id='okno-close'>x</span>
</div>
</div>
<style type='text/css'>
#okno-txt {
display:block; padding:10px; position: fixed; top: 40%; color: #fff; text-align: center; font-size:14px; }
#okno-txt span {
position:fixed; top:20px; left: 20px; text-align:center; font-size:24px; font-weight:bold; cursor:pointer; }
#okno-open {
position:absolute; top: 150px; left:45%;
cursor:pointer; display:inline-block; color: #000; text-align:center; font-weight:bold; font-size:13px; text-transform:uppercase; z-index: 2482161512671; }
#okno {
position: fixed; bottom: 0px; left: 0px; width: 100%; height: 100%; background: rgba(00,00,00,0.8); z-index: 24821615126716; }
</style>
</b:if>
Więcej niż jedno okienko na blogu?
Każde z następnych okienek dodajecie w taki sam sposób, jednak pamiętajcie, że wszędzie musicie zmienić czerwone selektory. Musicie dodać cały kod ponownie.
Znikający scroll
Jeżeli w okienku macie mało rzeczy (tak że mieści wam się wszystko na jednej stronie) możecie dodać ten kod nad </head>, żeby pozbyć się scrolla, gdy otwieracie okienko. Przykład tego macie w spisie tutoriali na stronie.
<script type='text/javascript'>
$(document).ready(function() {
$('#okno-open').on('click', function() {
$('html').css("overflow", "hidden");
});
});
</script>
<script type='text/javascript'>
$(document).ready(function() {
$('#okno-close').on('click', function() {
$('html').css("overflow", "auto");
});
});
</script>
$(document).ready(function() {
$('#okno-open').on('click', function() {
$('html').css("overflow", "hidden");
});
});
</script>
<script type='text/javascript'>
$(document).ready(function() {
$('#okno-close').on('click', function() {
$('html').css("overflow", "auto");
});
});
</script>
Subskrybuj:
Komentarze do posta (Atom)