Visualizzazione dei risultati da 1 a 4 su 4
  1. #1

    Bootstrap 5 non funziona la classe "Modal"

    Un saluto a tutti,
    sto convertendo un mio sito utilizzando il framework Bootstrap,
    ora sto impattando con la classe Modal per poter gestire i popup e le form a scomparsa.
    Un semplice esempio non funziona, visionabile al link modal, cliccando sul bottone non appare la form popup.
    Dopo ripetuti tentativi senza successo, chiedo un aiuto per venirne a capo.

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,311
    codice:
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
    ...
    <button type="button" class="close" data-dismiss="modal">×</button>
    ...
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    Ciao, per bootstrap 5 è necessario specificare la sigla "bs" negli attributi data.

    Correggi le parti mancanti del tuo script:

    data-bs-toggle="modal"
    data-bs-target="#myModal"
    data-
    bs-dismiss="modal"
    Hai già provato Forum HTML.it Toolset?
    uno script che ottimizza il layout e le funzionalità del Forum

  3. #3
    Grazie, ora funziona.

  4. #4
    Chiedo un ulteriore suggerimento per poter gestire la classe modal con una form che richiama un'altra form... di seguito l'esempio:
    FORM: modal.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Modal.html</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <script src="./assets/js/bootstrap.min.js"></script>
    <script src="./assets/js/vendor/jquery-1.4.2.min.js"></script>


    </head>
    <body>

    <div class="container">
    <h2>Basic Modal Example</h2>
    <!-- Trigger the modal with a button -->
    <button type="button" class="btn btn-info btn-lg" data-bs-toggle="modal" data-bs-target="#myModal"><a href="modal-f.html">Open Modal</a></button>


    </div>

    </body>
    </html>

    Form: Modal-f.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Modal.html</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <script src="./assets/js/bootstrap.min.js"></script>
    <script src="./assets/js/vendor/jquery-1.4.2.min.js"></script>
    </head>

    <body>
    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">
    <p>Some text in the modal.</p>
    </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
    </div>
    </div>

    </div>
    </div>
    </body>
    </html>

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2022 vBulletin Solutions, Inc. All rights reserved.