Joomla.it Forum
Joomla! 4 => Joomla! 4.x => : mariarosaria 12 Jan 2022, 10:36:23
-
Buongiorno a tutti.
Non so se il titolo è appropriato, ma non mi veniva altro.
Ho provato a creare un modal bootstrap qui (https://www.cittadelladellimmacolata.it/joomla4/) subito sotto la foto iniziale c'è un pulsante con scritto "launch demo modal".
Si apre una sorta di "overlay" grigio, ma con visualizzazione sballata del contenuto modal, e non è più possibile chiudere u uscire se non aggiornando la pagina.
Il codice l'ho copiato direttamente dalle guide bootstrap (https://getbootstrap.com/docs/5.1/components/modal/) e ho visto anche che a questa (https://www.joomla.it/blog/7567-esempi-di-utilizzo-bootstrap.html?highlight=WyJlc2VtcGkiLCJib290c3RyYXAiLCJib290c3RyYXAncyIsIidib290c3RyYXAiLCInYm9vdHN0cmFwJyIsImVzZW1waSBib290c3RyYXAiXQ==) pagina del blog joomla cliccando sul pulsante "apri finestra popup" per l'esempio modal, succede una cosa molto simile, anche se il contenuto del modal viene in qualche modo visualizzato.
Idee?
Questo è il codice preso direttamente da bootstrap e incollato al'interno dell'articolo. (ho provato anche con il codice dell'esempio joomla
<!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"> Launch demo modal </button> <!-- Modal -->
<div id="exampleModal" class="modal fade" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 id="exampleModalLabel" class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div>
<div class="modal-body">
<p>Testo</p>
</div>
<div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button></div>
</div>
</div>
</div>
</div>
Ho utilizzato soltanto la parte html. O c'è qualcosa da integrare lato javascript?
-
nella pagina di esempio il primissimo codice non funziona.
prova gli altri
-
Grazie.
Nella mia pagina ho inserito i 3 esempi, bootstrap e blog joomla primo e secondo.
I due codici del blog joomla sul mio sito non funzionano proprio (essendo stato scritto nel 2014 l'articolo, sarà una versione meno recente di bootstrap).
Tuttavia anche se provo il secondo esempio sul blog joomla il risultato è sempre uguale, bisogna aggiornare la pagina e si vede tutto sballato.
Su questa (https://disegnareilweb.it/modal-bootstrap.html) pagina di un sito che mi aveva condiviso tempo fa l'utente limma con helix ultimate funziona bene... :o
-
La finestra modal, la prima che hai inserito (trigger "codice copiato da getbootstrap . com") non funziona a causa dell'animazione on page load che hai inserito nel div.
Se la elimini funziona perfettamente; ma non chiedermi perché questo interferisca col funzionamento dela finestra modal di Bootstrap...
Potresti provare ad inserire l'animazione js direttamente nel tag button.
P.S. Dovrai anche modificare lo z-index della classe .modal (di default a 1050) perché l'header risulta "sopra" la finestra modal (lo z-index dovrai metterlo a 9999).
-
Grazie mille Limma!
L'ho estrapolato dal div principale e messo in un div per conto suo e funziona ;D
Se però tolgo il link dal "button" non va.C'è qualcosa di sbagliato nel codice del link, suppongo...
<a href="#exampleModal" data-toggle="modal" data-target="#exampleModal">Link prova</a>
Ho messo sempre l'esempio nella pagina...
-
data-bs-toggle e data-bs-target (nel tuo <a> hai tralasciato il "bs").
-
Grazie, mille, funziona perfettamente.
Avevo riguardato il codice, ma forse nella fusione mentale avevo pensato che fosse specifico dell'esempio.
;)