il y a un bouton
<button onclick="showModal('@Url.Action("EditUserProfile","Profile",null,Context.Request.Scheme)','ویرایش پروفایل کاربر');"
class="btn btn-warning w-100 mb-3">
ویرایش اطلاعات
</button>
il y a un modal
<div class="modal fade" id="modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-title"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div id="modal-body" class="modal-body">
</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>
lorsque je clique sur le bouton je veux afficher le mode modal uniquement en utilisant du JavaScript vanille
async function showModal(url, title) {
let modalEl = document.querySelector('#modal');
let bsModal = Bootstrap.Modal.getInstance(modalEl);
let modalTitle = document.querySelector('#modal-title');
let modalBody = document.querySelector('#modal-body');
let requestPage = await fetch(url);
let requestPageResponse = await requestPage.text();
modalTitle.innerHTML = title;
modalBody.innerHTML = requestPageResponse;
bsModal.show();
}
quand j'essaye cela, j'obtiens cette erreur
Uncaught (in promise) ReferenceError: Bootstrap n'est pas défini dans showModal
<!DOCTYPE html>
<html lang="fa-IR" dir="rtl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<script src="https://kit.fontawesome.com/0842d2bf89.js" crossorigin="anonymous"></script>
<link href="~/Bootstrap/bootstrap.css" rel="stylesheet" />
<link href="~/css/main.css" rel="stylesheet" />
</head>
<body>
<div class="main-wraper">
<vc:top-nav></vc:top-nav>
<div class="main-content">
@RenderBody()
</div>
<vc:footer></vc:footer>
</div>
<script src="~/Bootstrap/bootstrap.min.js"></script>
<script src="~/js/navbar.js"></script>
@RenderSection("scripts", false)
</body>
</html>
Vous devez vous assurer que le script twitter-bootstrap est au-dessus de votre showModal()fonction
Quelque chose comme:
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- This script must be above -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"></script>
<!-- This script must be below your boostrap script -->
<script src="YOUR SHOW MODAL ASYNC FILE PATH"></script>
</body>
</html>Dans votre showModalfonction
Changer cette ligne
let bsModal = Bootstrap.Modal.getInstance(modalEl);
pour ça
let bsModal = new boostrap.Modal(modalEl)
Voir la documentation
Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
laisse moi dire quelques mots