Skocz do zawartości

Modal - przyciemnienie strony


blanken
 Udostępnij

Rekomendowane odpowiedzi

Nazwa: AutoModal (bez mozliwosci zamkniecia)
Autor: blanken (wraz z kodami z neta)
Demo: [url=http://beproleague.pl/upload/pliki/untitled_55cd76c326f07.png]http://beproleague.pl/upload/pliki/untitled_55cd76c326f07.png[/url]
[u]Stworzylem ten "dodatek", aby zablokowac dostep do zakladki, w ktorej prowadze prace. W necie znajdziecie wiele podobnych rzeczy lecz moj wyroznia sie tym, ze:[/u][code] - stworzony zostal pod (budowe podstrony) - nie da sie wylaczyc poprzez klikniecie (na prosbe moge dodac kod, ktory doda przycisk do zamykania) -latwo go edytowac - stworzony w samym html oraz css (w wiekszosci taki prac uzywa sie rowniez JS co usprawnia w pewnym stopniu ten dodatek)[/code] ______________________________________________________________________________________
<b>HTML</b>  [quote][code]<div class="popup-wrapper" id="popup"> <div class="popup-container"> <b><center>Strona w budowie</b></center> <div class="meter"> <span style="width:70%"></span> <p>Prace ukonczone w 70%</p> </div> <center><p>Aktualnie pracujemy nad autorska drabinka dla naszej strony. <br>Juz niebawem</p></center> <br><center><a href="index.php"><span class="bluetext">Wroc do Glownej</span></a></center> </div> </div>[/code]   [/quote]CSS
  [quote][code]body { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 15px; } #popup { background-color: rgba(0,0,0,0.9); position: fixed; top:0; left:0; right:0; bottom:0; margin:0; -webkit-animation:autopopup 1s; -moz-animation:autopopup 1s; animation:autopopup s; } #popup:target { -webkit-transition:all 1s; -moz-transition:all 1s; transition:all 1s; opacity: 0; visibility: hidden; }@media (min-width: 768px){ .popup-container { width:600px; } } @media (max-width: 767px){ .popup-container { width:100%; } } .popup-container { position: relative; margin:7% auto; padding:30px 50px; background-color: #fafafa; color:#333; border-radius: 3px; }a.popup-close { position: absolute; top:3px; right:3px; background-color: #333; padding:7px 10px; font-size: 20px; text-decoration: none; height: 25px; border: 1px solid #b0b0b0; margin-top: 50px; /* viewing purposes */ margin-left: 0px; /* viewing purposes */ -webkit-box-shadow: inset 0 3px 5px 0 #d3d0d0; -moz-box-shadow: inset 0 3px 5px 0 #d3d0d0; box-shadow: inset 0 3px 5px 0 #d3d0d0; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } div.meter span { display: block; height: 100%; animation: grower 1s linear; -moz-animation: grower 1s linear; -webkit-animation: grower 1s linear; -o-animation: grower 1s linear; position: relative; top: -1px; left: -1px; -webkit-border-radius: 244px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.2); box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.2); border: 1px solid #3c84ad; background: #6eb2d1; background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent)); -webkit-background-size: 45px 45px; } div.meter span:before { content: ''; display: block; width: 100%; height: 50%; position: relative; top: 50%; background: rgba(0, 0, 0, 0.04); } div.meter p { position: absolute; top: 0; margin: 0 10px; font-family: 'Helvetica'; font-weight: bold; -webkit-font-smoothing: antialised; font-size: 15px; color: #333; text-shadow: 0 1px rgba(255, 255, 255, 0.6); } @keyframes grower { 0% { width: 0%; } } .bluetext { background:#0000ff; border-radius: 1px; color: #ffffff; padding: 4px 6px; text-transform:uppercase; font-size:13px; }[/code]   [/quote]Zakazuje udostepniania tego pliku bez mojej zgody. Chcesz go gdzies udostepnic napisz mi na PW [img]emoticons/default_smile.png[/img]
Niektore kody pisane przeze mnie a niektore z neta :) . Niestety nie jestem w stanie podac dokladnych autorow dlatego przepraszam.
Edytowane przez Gość
Odnośnik do komentarza
Udostępnij na innych stronach

Gość
Ten temat został zamknięty. Brak możliwości dodania odpowiedzi.
 Udostępnij

Wiadomości

×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Umieściliśmy na Twoim urządzeniu pliki cookie, aby pomóc Ci usprawnić przeglądanie strony. Możesz dostosować ustawienia plików cookie, w przeciwnym wypadku zakładamy, że wyrażasz na to zgodę.