Back to top

Autore Topic: [RISOLTO] modal bootstrap malfunzionante  (Letto 1277 volte)

Offline mariarosaria

  • Appassionato
  • ***
  • Post: 514
  • Sesso: Femmina
  • Comincio a capire...
    • Mostra profilo
[RISOLTO] modal bootstrap malfunzionante
« il: 12 Gen 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 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 e ho visto anche che a questa 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
Codice: [Seleziona]
<!-- 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?
« Ultima modifica: 06 Feb 2022, 09:15:12 da mariarosaria »

Offline giusebos

  • Fuori controllo
  • *
  • Post: 21748
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
Re:modal bootstrap malfunzionante
« Risposta #1 il: 12 Gen 2022, 11:10:49 »
nella pagina di esempio il primissimo codice non funziona.
prova gli altri
su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

Offline mariarosaria

  • Appassionato
  • ***
  • Post: 514
  • Sesso: Femmina
  • Comincio a capire...
    • Mostra profilo
Re:modal bootstrap malfunzionante
« Risposta #2 il: 12 Gen 2022, 12:51:35 »
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 pagina di un sito che mi aveva condiviso tempo fa l'utente limma con helix ultimate funziona bene...  :o


Offline Limma

  • Abituale
  • ****
  • Post: 1209
  • Sesso: Maschio
    • Mostra profilo
Re:modal bootstrap malfunzionante
« Risposta #3 il: 13 Gen 2022, 09:13:45 »
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).





Offline mariarosaria

  • Appassionato
  • ***
  • Post: 514
  • Sesso: Femmina
  • Comincio a capire...
    • Mostra profilo
modal bootstrap malfunzionante
« Risposta #4 il: 13 Gen 2022, 13:58:32 »
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...

Codice: [Seleziona]
<a href="#exampleModal" data-toggle="modal" data-target="#exampleModal">Link prova</a>
Ho messo sempre l'esempio nella pagina...
« Ultima modifica: 13 Gen 2022, 14:22:55 da mariarosaria »

Offline Limma

  • Abituale
  • ****
  • Post: 1209
  • Sesso: Maschio
    • Mostra profilo
Re:modal bootstrap malfunzionante
« Risposta #5 il: 13 Gen 2022, 15:33:39 »
data-bs-toggle e data-bs-target (nel tuo <a> hai tralasciato il "bs").
« Ultima modifica: 13 Gen 2022, 15:55:23 da Limma »

Offline mariarosaria

  • Appassionato
  • ***
  • Post: 514
  • Sesso: Femmina
  • Comincio a capire...
    • Mostra profilo
[RISOLTO] Re:modal bootstrap malfunzionante
« Risposta #6 il: 13 Gen 2022, 16:14:53 »
 Grazie, mille, funziona perfettamente.
Avevo riguardato il codice, ma forse nella fusione mentale avevo pensato che fosse specifico dell'esempio.
 ;)

 



Web Design Bolzano Kreatif