Šta je novo?
Od:
Filteri

HTML stranica, "pop-up"

  • Začetnik teme Začetnik teme veske
  • Datum pokretanja Datum pokretanja
veske

veske

Slavan
Učlanjen(a)
28.06.2005
Poruke
528
Poena
320
Imam jedan link na stranici ( HTML ), koji bi trebao da otvori nesto na fazonu novog prozora, u okviru istog prozora ( kao npr. padajuci meni kod CSSa). Taj novi prozor bi trebao samo da sadrzi jednu tabelu sa odredjenom kolicinom podataka.
Kako to uraditi?
Uslov je da ne bude Pop-up, vec source te tabele treba da bude na toj osnovnoj strani zbog Googlea. Ja sam mislio da moze nesto sa CSSom da se uradi, ali ne umem kako.
Nakon klika na taj novi prozor on bi trebao da se zatvori.
Ima li neko ideju?
 
Evo mozda ti ovo pomogne, CSS i malo JavaScripta:

Kod: 
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

      <html>

          <head>

              <title>LIGHTBOX EXAMPLE</title>

              <style>

              .black_overlay{

                  display: none;

                  position: absolute;
 
                  top: 0%;

                  left: 0%;

                  width: 100%;

                  height: 100%;

                  background-color: black;

                  z-index:1001;

                  moz-opacity: 0.8;

                  opacity:.80;

                  filter: alpha(opacity=80);
  
              }

              .white_content {

                  display: none;

                  position: absolute;

                  top: 25%;

                  left: 25%;

                  width: 50%;

                  height: 50%;

                  padding: 16px;

                  border: 16px solid orange;

                  background-color: white;

                  z-index:1002;

                  overflow: auto;

              }

          </style>
<script>
function com()
{
alert("klsdjf");
}
</script>
          </head>
          <body>
              <p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>

              <div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a><br>
           </div>
              <div id="fade" class="black_overlay"></div>
          </body>
      </html>
 
Hvala puno, to je bas ono sto mi treba.
Jedino je problem sto taj prozor uvek otvara pri vrhu 🙁 Meni treba da ga otvori tacno na mestu gde je taj link, a to je negde na sredini stranice.
Kako to da podesim?

🙁 Niko ne nezna 🙁🙁🙁
 
Poslednja izmena od urednika:
Poenta je u tome da se tabela sakrije. To postižeš CSS-om uz pomoć display:none. Napravi CSS klasu koja se zove .none ili .sakrij ili kako već i stavi display:none unutra. Zatim napravi javascript funkciju koja će prikazivati ili sakrivati tabelu u zavisnosti od toga da li je već prikazana. Npr:

Kod: 
function toggle() {
var tabela= document.getElementById('tabela');
if (tabela.className=="sakrij")
tabela.className="";
else
tabela.className="sakrij";
}

Može ovo mnogo elegantnije da se napiše ali sam namerno ostavio ovako zbog razumljivosti. Dalje, staviš onclick event na dugme koje će otvarati i zatvarati tabelu. Npr:

Kod: 
<input id="dugme" type="button" onclick="toggle()" />

Što se pozicioniranja tabele tiče, možeš je pomerati u odnosu na dugme koje je otvara uz pomoć javascripta i css-a. Prvo, postavi tabelu na position:absolute i neka bude skrivena po defaultu. Onda,

Kod: 
function postavi_tabelu() {
var tabela= document.getElementById('tabela');
var dugme= document.getElementById('dugme');
tabela.style.left= dugme.offsetLeft+"px"; // sa offsetLeft dobijaš cross-browser poziciju dugmeta, a style.left postavlja css vrednost tabele
tabela.style.top= (dugme.offsetTop+20)+"px"; // isto kao i gore samo dodajemo otprilike 20px kolika je visina dugmeta
toggle();
}

funkcija postavi_tabelu() može da se izvrši na primer ovako:

Kod: 
window.onload= function() {postavi_tabelu()} // staviš bilo gde u javascript fajlu ili već <script> tagu

Ne zameri mi ako se kod ne izvršava, kucam napamet, u svakom slučaju se nadam da će te navesti na pravi put 🙂
 
Mislim da bi ovo Dakisovo resilo problem, ali ja to ne umem da narapvim 🙁 Ako neko moze da mi odradi kod, bilo bi super.
 
Morate se prijaviti ili registrovati da odgovorite ovde.
Nazad
Vrh Dno