Jak dynamicznie na podstawie linku utworzyć okno modalne

pytanie zadane 24 maja 2017 w PHP przez manjaro Nałogowiec (37,390 p.)

Mam taki oto problem, pewnie dość typowy... Pobieram sobie z bazy danych jakieś dane i wyświetlam w tabelce na stronie. I teraz chciałbym aby po kliknięciu w jakiś wiersz z tabelki otwierało się okno modalne z pełnymi informacjami na temat wybranego wiersza. Problem w tym że nie wiem jak w linku przekazać parametry albo zmienne czy coś do dynamicznego tworzenia okna modalnego, Możliwe że źle kombinuję i do tego typu zastosowań stosuje się inne techniki. Poradzicie coś?

3 odpowiedzi

odpowiedź 24 maja 2017 przez Zbigniew Andrysiak Bywalec (2,470 p.)
wybrane 25 maja 2017 przez manjaro

Najlepsza

Chętnie pomogę, ale... Na czym kolega pracuje? Bootsrtap czy coś innego?

komentarz 25 maja 2017 przez manjaro Nałogowiec (37,390 p.)

Tak, bootstrap

Tworzę sobie linki typu

<a href="#" data-toggle="modal" data-target="#myModal1"> Klik </a>

<a href="#" data-toggle="modal" data-target="#myModal2"> Klik </a>

<a href="#" data-toggle="modal" data-target="#myModal3"> Klik </a>

I chciałbym aby po kliknięciu w link generował się odpowiednio spreparowany div z id=myModal1 myModal2 itd...

komentarz 25 maja 2017 przez Zbigniew Andrysiak Bywalec (2,470 p.)

Masz dwie opcje.
Jeżeli masz coś w pętli z bazy sql to wyjście jest takie

<button data-toggle="modal" data-target="#modalPort<?php echo $row['id']; ?>" class="btn btn-success btn-xs">Wyślij E-mail</button>

Oraz Modal

  <div class="modal fade" id="modalPort<?php echo $row['id']; ?>" tabindex="-1" role="dialog" >
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Tytuł</h4>
            </div>
            <div class="modal-body text-center">



                  

              </div>
            
                <div class="modal-footer">
              
    
                <button type="button" class="btn btn-default" data-dismiss="modal">Anuluj</button>
                 </div>

          </div>
    </div>
</div>

W przypadku gdy masz kilka linków i chcesz podpiąć pod to modale to odpowiednio w "data-target" dodaje #modalPort1, a potem #modalPort2 i wtedy w modalu odpowiedno <div class="modal fade" id="modalPort1" ... <div class="modal fade" id="modalPort2".

A i nie potrzebny jest tutaj GET i POST dane są od razu zaczytane do modala - możesz podpatrzeć w źródle strony :)

Mam nadzieję, że pomogłem. Jak coś pisz :)

komentarz 25 maja 2017 przez manjaro Nałogowiec (37,390 p.)

Tak właśnie mam, te linki generuję w pętli przy pobieraniu danych z bazy. Ale sugerujesz aby też w tej samej pętli tworzyć osobne modale dla każdego linku? Nie pomyślałem o tym pewnie dlatego że tych linków jest kilkadziesiąt ;)

komentarz 25 maja 2017 przez Zbigniew Andrysiak Bywalec (2,470 p.)

Jak w pętli to pierwszy sposób - będzie działać - mi przynajmniej działa. Jeśli masz kilkadziesiąt linków no to chyba bardzo dużo pracy.

komentarz 25 maja 2017 przez manjaro Nałogowiec (37,390 p.)

Wszystko działa, dziękuję za pomysł. Aczkolwiek raczej chodziło mi o rozwiązanie bardziej eleganckie aby wstawiać jednorazowo zmienne do szablonu podczas kliknięcia w link. Możliwe że nie da się tak. Niemniej jednak dziękuję @Zbyszku za pomoc

Ale mimo wszystko trochę jestem zawiedziony bo na forum pełno web developerów co zarabiają po 10k a nikt nie podsunął sprytnego rozwiązania tego bądź co bądź trywialnego problemu z najprostszą obsługą CRUDa.

komentarz 25 maja 2017 przez Zbigniew Andrysiak Bywalec (2,470 p.)

Drogi kolego - zawsze można spróbować jakoś dalej pójść i zadziałać inaczej. Spróbuję jeszcze później jakiś pomysł podsunąć.

odpowiedź 24 maja 2017 przez Lu Kiss Dyskutant (7,600 p.)

Ma być okno modalne ?

https://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/

Bo jest jeszcze prosty tooltip

http://jsfiddle.net/Ke23E/

komentarz 25 maja 2017 przez manjaro Nałogowiec (37,390 p.)

Tooltip odpada, tu chodzi o duży wystylizowany opis i foto.

Ten pierwszy link pokazuje jak używać tego. Ale to jest metoda statyczna dla jednego linku. A ja mam kilkadziesiąt linków i chciałbym je otwierać dynamicznie.

odpowiedź 24 maja 2017 przez Chess Szeryf (76,710 p.)
edycja 24 maja 2017 przez Chess

<a href="http://localhost/manjaro.php?wyswietl=a">KLIK</a>
<a href="http://localhost/manjaro.php?wyswietl=b">KLIK</a>

<?php 
//print_r($_GET);

$table = <<<EOD

<table>
	<tr>
		<td>spec</td><td>desc</td>
	</tr>
	<tr>
		<td>5.3</td><td>PHP</td>
	</tr>
</table>

EOD;

$schowaj = "<a href='http://localhost/manjaro.php'>schowaj</a>";

if(!isset($_GET['wyswietl'])){
	//echo 'puste zmienne!';
	null;
}else{ 

	if($_GET['wyswietl']=='a'){
		echo $table;
		echo $schowaj;
	}elseif($_GET['wyswietl']==='b'){ 
		echo 'Informacje na temat klasy "B"!';
		echo $schowaj;
	} 

}
?>

1	komentarz 24 maja 2017 przez Boshi VIP (100,240 p.) Odpowiedz b nie ma temat

komentarz 25 maja 2017 przez manjaro Nałogowiec (37,390 p.)
edycja 25 maja 2017 przez manjaro

No może nie do końca nie na temat bo też się zastanawiałem aby posłać parametr poprzez GET ale do okna modalnego to nie działa niestety, bo otwarcie okna modalnego nie przeładowuje strony aby uaktywnić zmienną $_GET..