Zablokowane Modal - przyciemnienie strony

blanken · 14 Sierpnia 2015

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 14 Sierpnia 2015 przez Gość