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.
Ciao, per bootstrap 5 è necessario specificare la sigla "bs" negli attributi data.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>
Correggi le parti mancanti del tuo script:
data-bs-toggle="modal"
data-bs-target="#myModal"
data-bs-dismiss="modal"
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Grazie, ora funziona.
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">×</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
Rispondi quotando