Brian U
Reputation: 21
Bootstrap Modal not popping up when clicking button
I'm trying to add a modal when the user clicks on the 'Add' button under 'Categories.' When I use just the code for the modal in js fiddle, it works, but when I add all of the code from the current file, it doesn't. Have tried moving jquery cdn around and also making a separate div container for the modal, but not able to get it. Any help is appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Inventory Management System</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj"
crossorigin="anonymous"
></script>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous"
/>
<link
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"
rel="stylesheet"
/>
<script type="text/javascript" src="./js/main.js"></script>
</head>
<body>
<!-- Navbar -->
<?php include_once("./templates/header.php"); ?>
<br /><br />
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card mx-auto">
<img
src="./images/user.png"
style="width: 60%"
class="card-img-top mx-auto"
alt="Card image cap"
/>
<div class="card-body">
<h4 class="card-title">Profile Info</h4>
<p class="card-text">
<i class="fa fa-user"> </i>Brian Liang
</p>
<p class="card-text"><i class="fa fa-user"> </i>Admin</p>
<p class="card-text">Last Login : xxxx-xx-xx</p>
<a href="#" class="btn btn-primary"
><i class="fa fa-edit"> </i>Edit Profile</a
>
</div>
</div>
</div>
<div class="col-md-8">
<div class="jumbotron" style="width: 100%; height: 100%">
<h1>Welcome Admin,</h1>
<div class="row">
<div class="col-sm-6">
<iframe
src="http://free.timeanddate.com/clock/i7l8nwj9/n199/szw160/szh160/hoca32/hbw10/hfcc00/cf100/hnca32/fas30/facfff/fdi86/mqcfff/mqs2/mql3/mqw4/mqd70/mhcfff/mhs2/mhl3/mhw4/mhd70/mmcfff/mml4/mmw4/mmd98/hhcfff/hhs2/hmcfff/hms2/hscfff"
frameborder="0"
width="160"
height="160"
></iframe>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">New Orders</h4>
<p class="card-text">
Here you can make new invoices and create new orders.
</p>
<a href="#" class="btn btn-primary">New Orders</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<p></p>
<p></p>
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Categories</h4>
<p class="card-text">
Here you can manage your categories and can add parent and sub
categories
</p>
<a
href="#"
data-toggle="modal"
data-target="#exampleModal"
class="btn btn-primary"
>Add</a
>
<a href="#" class="btn btn-primary">Manage</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Brands</h4>
<p class="card-text">
Here you can manage your brand and can add a new brand
</p>
<a href="#" class="btn btn-primary">Add</a>
<a href="#" class="btn btn-primary">Manage</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Products</h4>
<p class="card-text">
Here you can manage your products and can add new products
</p>
<a href="#" class="btn btn-primary">Add</a>
<a href="#" class="btn btn-primary">Manage</a>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="row">
<div
class="modal fade"
id="exampleModal"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-dismiss="modal"
>
Close
</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Upvotes: 2
Views: 7910
Answers (2)
Hamza Abdaoui
Reputation: 2209
The code that you useis only available for Bootstrap 4, but in the header, you are including the Bootstrap 5 that have changed some parameters regarding modals :
To trigger a modal:
// OLD WAY data-toggle="modal" data-target="#exampleModal" // NEW WAY data-bs-toggle="modal" data-bs-target="#exampleModal"Declaring a modal :
<div class="modal fade" id="exampleModal" 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="exampleModalLabel">Modal title</h5> <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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Inventory Management System</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj"
crossorigin="anonymous"
></script>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous"
/>
<link
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"
rel="stylesheet"
/>
<script type="text/javascript" src="./js/main.js"></script>
</head>
<body>
<!-- Navbar -->
<?php include_once("./templates/header.php"); ?>
<br /><br />
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card mx-auto">
<img
src="./images/user.png"
style="width: 60%"
class="card-img-top mx-auto"
alt="Card image cap"
/>
<div class="card-body">
<h4 class="card-title">Profile Info</h4>
<p class="card-text">
<i class="fa fa-user"> </i>Brian Liang
</p>
<p class="card-text"><i class="fa fa-user"> </i>Admin</p>
<p class="card-text">Last Login : xxxx-xx-xx</p>
<a href="#" class="btn btn-primary"
><i class="fa fa-edit"> </i>Edit Profile</a
>
</div>
</div>
</div>
<div class="col-md-8">
<div class="jumbotron" style="width: 100%; height: 100%">
<h1>Welcome Admin,</h1>
<div class="row">
<div class="col-sm-6">
<iframe
src="http://free.timeanddate.com/clock/i7l8nwj9/n199/szw160/szh160/hoca32/hbw10/hfcc00/cf100/hnca32/fas30/facfff/fdi86/mqcfff/mqs2/mql3/mqw4/mqd70/mhcfff/mhs2/mhl3/mhw4/mhd70/mmcfff/mml4/mmw4/mmd98/hhcfff/hhs2/hmcfff/hms2/hscfff"
frameborder="0"
width="160"
height="160"
></iframe>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">New Orders</h4>
<p class="card-text">
Here you can make new invoices and create new orders.
</p>
<a href="#" class="btn btn-primary">New Orders</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<p></p>
<p></p>
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Categories</h4>
<p class="card-text">
Here you can manage your categories and can add parent and sub
categories
</p>
<a
href="#"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
>Add</a
>
<a href="#" class="btn btn-primary">Manage</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Brands</h4>
<p class="card-text">
Here you can manage your brand and can add a new brand
</p>
<a href="#" class="btn btn-primary">Add</a>
<a href="#" class="btn btn-primary">Manage</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Products</h4>
<p class="card-text">
Here you can manage your products and can add new products
</p>
<a href="#" class="btn btn-primary">Add</a>
<a href="#" class="btn btn-primary">Manage</a>
</div>
</div>
</div>
</div>
<!-- Modal -->
<!-- Modal -->
<div class="modal fade" id="exampleModal" 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="exampleModalLabel">Modal title</h5>
<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>
</body>
</html>Upvotes: 6
Aidan
Reputation: 115
You are probably getting your bootstrap versions mixed up. I have tested your code using bootstrap 4 and bootstrap 5 and can confirm it works on bootstrap 4 but does not on bootstrap 5, you can fix your code easily by replacing your bootstrap 5 script imports with bootstrap 4, or you can port your code to bootstrap 5.
Bootstrap 5 recently changed the way modals are triggered, which is why it does not work on 5 but does work on 4.
The following head works for me
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Inventory Management System</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
Upvotes: 3
Related Questions
- Bootstrap modal not popping up when button is pressed
- Modal Not Popping Up When Clicking Button
- Modal button not working with event click?
- Boostrap Modal not popping up when button is pressed
- Modal Box/ Pop up is not coming
- Bootstrap modal not working after clicking button
- Bootstrap 4 Modal - Clicking Button But Modal Doesnt Show
- bootstrap modal popup does not show at all
- button for 2nd modal won't open the modal
- jQuery modal will not display when I click button