Nowa wersja bloga jest już aktywna.
LASAIR.PL
Serdecznie zapraszam!

intrukcje szablony loga do druku poradniki nadruki

» » Okienko po kliknięciu

Okienko po kliknięciu
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>

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>

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 */
}


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;  }


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>


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() {
   $(&#39;#okno-open&#39;).on(&#39;click&#39;, function() {
      $(&#39;html&#39;).css(&quot;overflow&quot;, &quot;hidden&quot;);
   });
});
</script>

<script type='text/javascript'>
$(document).ready(function() {
   $(&#39;#okno-close&#39;).on(&#39;click&#39;, function() {
      $(&#39;html&#39;).css(&quot;overflow&quot;, &quot;auto&quot;);
   });
});
</script>

6 komentarzy:

  1. Vanes4 maja 2015 13:29

    ♥

    OdpowiedzUsuń
  2. Hela4 maja 2015 14:04

    O jeeeej, nawet nie wiesz jak się cieszę, że ktoś *poza mną ^^* zaczyna się bawić jQuery. Takie to małe i poręczne, a ile fajnych rzeczy można osiągnąć. Z tego co widziałam, w tą stronę poszła ostatnio też Agata na Wiosce [choć może ona ma tam JS... po kodzie nie patrzyłam, a bawiła się nim już wcześniej], więc być może stanie się to bardziej popularne na blogspocie. Im więcej instrukcji w tej materii, tym większe szanse, że tak będzie.

    Co do głównego - miałam Ci już to pisać wcześniej, ale jakoś nie było nigdy czasu: jest GE-NIA-LNY. Chociaż podkład muzyczny mnie wkurza (nie przejmuj się, mnie zawsze podkład na stronie wkurza, bo u mnie w domu muzyka leci 24 godziny na dobę, więc mi się jedno z drugim kłóci), to faktycznie dodaje super klimat. Przycisk OFF jak na moje by tu jednak nie zaszkodził (szefowa przed chwilą zapytała mnie "co się tak leje", kiedy zapomniałam o wyłączeniu dźwięku i ciężko było jej to wyjaśnić ^^). A jak już tak marudzę, co by się przydało - gott, tylko mnie za to nie znienawidź z marszu, ja zawsze mam milion rad, którymi wcinam się w inwencję innych - to dorzucenie do intro skrypciku, żeby pojawiało się (na przykład) tylko raz dziennie, a nie przy każdym odświeżeniu, też by mogło być całkiem spoko. Za każdym razem jak wracam na główną, wskakuje mi od nowa i muszę czekać aż się :zniknie:. Ale może to przeszkadza tylko mnie... bo ja skrzywiony człowiek pod tym względem jestem, bardzo skrzywiony...

    OdpowiedzUsuń
    Odpowiedzi
    1. Rinne6 maja 2015 14:00

      Bawić...? Chyba się mordować z tym XD

      Dziękuję bardzo <3 Miałam w planach dorobić przycisk off, ale tak jakoś... nie wyszło xD Myślałam, że nikt tutaj nie będzie siedział tak długo, żeby stało się to uciążliwe :D No ale może uda mi się coś wymyślić ^^
      Fajny pomysł, nawet nie myślałam, żeby coś takiego dodać do intra :D Chociaż mnie już również trochę zaczyna denerwować, ale wydawało mi się, że tylko ja wchodzę na RT parę razy, a inni ludzie od święta, lub "od postu" XD

      Pozdrawiam <3

      Usuń
    2. Hela6 maja 2015 14:24

      Mordować to faktycznie bardziej obrazowe słowo. Ja zamiennie używam tez "walczyć" ale zaczęłam się nawet przyzwyczajać że po błyskotliwym "tak! wiem jak to zrobić! jestem geniuszem!" nadchodzi smutne "czemu to do cholery znowu mnie nie kocha?

      Nazwij mnie stalkerem jeśli chcesz, jak już zacznę coś odwiedzać to obsesyjnie po kilka razy dziennie

      Usuń
  3. Zielony Kociak6 maja 2015 17:11

    Czo ta Rinne. ;D
    Dzieny za instrukcję.

    OdpowiedzUsuń
  4. Alexxa4 czerwca 2015 17:44

    O mój boże! Szablon główny jest taki wypasiony *0* Matko dziewczyno, nie mam pojęcia jak długo musiałaś go robić, ale efekt jest genialny! :D
    Instrukcja na pewno mi się przyda, czekam na następną! :D
    Pozdrawiam Alexxa ♥

    OdpowiedzUsuń

Subskrybuj: Komentarze do posta (Atom)