Wyskakujące okno po kliknięcu w link

Question

Hej, nie znam się na java scriptcie, stąd to pytanie. Jak zrobić wyskakujące okno po kliknięciu na komórkę tabeli? Wszystko co się dało pisałem w php bo jest bardzo podobne do c++, którego całkiem nieźle ogarniam, więc nie wiem nic o js. Mam też pytanie jak takie coś umieścić w kodzie? Jestem w tagu <?php?> i nie wiem, czy muszę go zamykać, czy wystarczy coś w stylu echo '<script>jakiś kod</script>';

Comments

Możesz zrobić: 

echo "<script>    window.onload = function() { const bt_oblicz = document.getElementById('oblicz'); bt_oblicz.addEventListener('click', () => { const pole = document.getElementById('pole'); const wynik = document.getElementById('wynik'); wynik.innerHTML = pole.value; }); };</script>";

ale jak sam widzisz, już tak krótki kod, staje się nieczytelny do edycji.

Można tez tak

echo "<script>"
       . "window.onload = function() {"
       . " const bt_oblicz = document.getElementById('oblicz');"
       . " ...."
       . "});"
       . " };"
       . "</script>";

Według Mnie najczytelniejsze łączenie kodu php z html

<?php

   ............... kod php
$zmienna_php = " hello KumberTwo";

?>
<!--  start kod html w tym przypadku otwarcie znacznika <script> -->
<script>
    window.onload = function() {
        const bt_oblicz = document.getElementById('oblicz');
 
        bt_oblicz.addEventListener('click', () => {
            const pole = document.getElementById('pole');
            const wynik = document.getElementById('wynik');
            wynik.innerHTML = pole.value + "<?=$zmienna_php?>";
        });
    };
</script>
<?php

   .......... dalszy kod php  

?>

 .... html
  </body>
</html>

 

---

Rzeczywiście, nie widać tutaj zbyt dużo, spodziewałem się krótszego kodu Mógłbyś wytłumaczyć co tu się dzieje?

---

Ale ty chcesz okno otwierać (bo można window.open) czy raczej o modal box'a 

---

Wstaw te cześć kodu html i opisz co ma być klikane, i co ma się otwierać po kliknięciu.

---

Próbuję zrobić kalendarz. Mój kod pewnie jest dosyć pokraczny, ale dopiero się uczę, więc za cel postawiłem sobie to, żeby program działał a nie był jak najbardziej wydajny czy przejrzysty.
 

<?php
      $miesiac[1] = "Styczeń";
      $miesiac[2] = "Luty";
      $miesiac[3] = "Marzec";
      $miesiac[4] = "Kwiecień";
      $miesiac[5] = "Maj";
      $miesiac[6] = "Czerwiec";
      $miesiac[7] = "Lipiec";
      $miesiac[8] = "Sierpień";
      $miesiac[9] = "Wrzesień";
      $miesiac[10] = "Październik";
      $miesiac[11] = "Listopad";
      $miesiac[12] = "Grudzień";
      echo '<br><br>';
      $teraz = 1; //ktora data z kolei zaraz zostanie uzyta
      for($l = 1; $l <= 12; $l++)
      {
        require_once "connect.php";
        $polaczenie = @new mysqli($host, $db_user, $db_password, $db_name);
        $id = $_SESSION['id'];
        if($_SESSION['admin'] == 0)
          $rezultat = $polaczenie->query("SELECT * FROM wydarzenia WHERE id_uzytkownika = '$id' ORDER BY data");
        else
          $rezultat = $polaczenie->query("SELECT * FROM wydarzenia ORDER BY data");
        for($i = 1; $i <= $rezultat->num_rows; $i++)
        { //wczytuje wszystkie raty z bazy
          $data[$i] = $rezultat->fetch_assoc(); //jak chce się odwołać to data[i]['indeks_asoc'];
        }

        echo '<div class="rok">';
        echo '<p class = miesiac>'.$miesiac[$l].'</p>';
        echo '<table class="kalendarz">
          <tr>
            <td>pon</td><td>wt</td><td>śr</td><td>czw</td><td>pt</td><td>sb</td><td>nd</td>
          </tr>';

            echo '<tr>';

            $pierwszy_dzien = date('N', mktime(0, 0, 0, $l, 1, date('Y'))); //pn = 1, nd = 7 (pierwszy dzień miesiąca)
            $dni_mies = date('t', mktime(0, 0, 0, $l, 1, date('Y'))); //ilość dni danego miesiąca
            for($i = 1; $i < $pierwszy_dzien; $i++)
            {
              echo '<td></td>';
            }
            for($i = 1; $i <= $dni_mies; $i++) //dopóki mniejsze od ilości dni w miesiącu
            {

              if(date_format(date_create(date('Y').'-'.$l.'-'.$i), "Y-m-d") == strval($data[$teraz]['data']))
              {
                echo '<td class="wydarzenie">'.$i;
                echo '<br>';
                if($teraz < $rezultat->num_rows)
                  $teraz++;
              }
              else {
                echo '<td>'.$i;
              }
              echo '</td>';
              if(($i + $pierwszy_dzien-1) % 7 == 0)
              {
                echo '</tr><tr>';
              }
            }
            for($i = 0; $i < 7-(($dni_mies-1 + $pierwszy_dzien)%7); $i++) //dodawanie pustych komurek na koncu miecha
            {
              if(7-(($dni_mies-1 + $pierwszy_dzien)%7) == 7) break;
              echo '<td></td>';
            }
           echo '</tr></table><br><br>';
           echo '</div>';
       }
?>

Chcę, aby po kliknięciu w dany dzień miesiąca, wyskakiwało okienko z wszystkimi wydarzeniami, które mamy zapisane na ten dzień, oraz z możliwością dodania nowego wydarzenia, chociaż najpierw wolał bym się skupić na tym pierwszym. Szczerze mówiąc wyobrażałem sobie coś w stylu alert(), ale chyba nie będzie to wyglądać najlepiej. Więc tak naprawdę to sam nie wiem, czego chcę użyć, bo po prostu nie znam wszystkich możliwości.

---

Kalendarz PHP z możliwością dodawania wydarzeń do bazy danych MySQL

Answer 1

Tak w skrócie:

Stwórz diva/sekcję/etc., która będzie właśnie tym okienkiem, nadaj mu w CSS display:none, a w linku (który go pokazuje) dodaj zdarzenie onclick, w którym będzie:

document.getElementById('id-wyskakujacego-okienka').style.display='fixed';