why my modal form not displaying?

R

rwahdan

New member
I have a model I am trying to rum on button click but it is not working...

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TLS Courses 2025</title>

<!-- bootstrap link -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384- QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">
<!-- font awsome link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

and in the body :

<body>

<h1 class="bg-dark text-light text-center py-2">Welcome to TLS Course 2025</h1>
<div class="container">
<!-- Modal -->
<div class="modal fade" id="testmodel" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div 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>
<div class="row">
<div class="col-10">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text bg-dark"><i class="fa-solid fa-magnifying-glass text-light"></i></span>
</div>
<input type="text" class="form-control" placeholder="Search Users...">
</div>
</div>
<div class="col-2">
<button class="btn btn-dark" data-toggle="modal" data-target="#testmodel">
Add New User
</button>
</div>
</div>
</div>
<!-- JQuary link -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"></script>
<!-- JS link -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<!-- popper link -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
crossorigin="anonymous"></script>
</body>

why it is not working, i have the id the same for the button and modal:

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

and inside the button:

<div class="col-2">
<button class="btn btn-dark" data-toggle="modal" data-target="#testmodel">
Add New User
</button>
</div>

please help me solve this
 
Are you getting any errors? Have you checked your browser console?
From looking at your code, you are using a version of Bootstrap that requires the BS structure.
So, you need to change how you call it.
Code: 
<button class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#testmodel">
Try that.
 
You must log in or register to reply here.
Back
Top