Boostrap Modal Does not opening when click on edit button - php

Question

i have been making a crud application using php , mysql and bootstrap. everything is working fine but when i click on edit option the model does not open.i can understand why this is happening.
this is happening when i click on edit button. no modal is showing
Bootstrap modal not showing
code of edit button
<span class="glyphicon glyphicon-edit" style="color: #fff;"></span>
modal code
<div class="modal fade" id="edit<?php echo $row['userid']; ?>" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<center><h4 class="modal-title" id="myModalLabel">Edit</h4></center>
</div>
<div class="modal-body">
<?php
$edit=mysqli_query($conn,"select * from customer_record where userid='".$row['userid']."'");
$erow=mysqli_fetch_array($edit);
?>
<div class="container-fluid">
<form method="POST" action="edit.php?id=<?php echo $erow['userid']; ?>">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label>NAME</label>
<input type="text" name="name" class="form-control" value="<?php echo $erow['name']; ?>">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>PHONE</label>
<input type="text" name="phone" class="form-control" value="<?php echo $erow['phone']; ?>" >
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>PRODUCT</label>
<input type="text" name="product" class="form-control" value="<?php echo $erow['product']; ?>" >
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>CLIENT NAME</label>
<select type="text" name="client" class="form-control" value="<?php echo $erow['client']; ?>">
<option>select</option>
<option> Carrefour FORT - L </option>
<option> Carrefour EMP - L </option>
<option> Carrefour PKJS - L </option>
<option> Carrefour LYPR - F </option>
<option> Carrefour WTC - I</option>
<option> Carrefour PAL - K</option>
<option> Carrefour L.ONE -K</option>
<option> Hyundai </option>
<option> Kenwood </option>
<option> Canon </option>
<option> Cash </option>
<option> Multynet </option>
<option> Panasonic</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>ADDRESS</label>
<input type="text" name="address" class="form-control" value="<?php echo $erow['address']; ?>">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>ZONE AREA</label>
<select name="zone_area" class="form-control" value="<?php echo $erow['zone_area']; ?>">
<option>select</option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
<option>F</option>
<option>G</option>
<option>H</option>
<option>I</option>
<option>J</option>
<option>NA</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>DELIVERY DATE</label>
<input type="date" name="delivery_date" class="form-control" value="<?php echo $erow['delivery_date']; ?>">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>DELIVERY STATUS</label>
<select name="delivery_status" class="form-control" value="<?php echo $erow['delivery_status']; ?>">
<option>select</option>
<option> Self Carry </option>
<option> Pending </option>
<option> Lift Back</option>
<option> Deliverd</option>
<option> Deliverd in 2nd attempt</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label>INVOICE #</label>
<input type="text" name="invoice" class="form-control" value="<?php echo $erow['invoice']; ?>">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>VEHICLE #</label>
<select type="text" name="vehicle" class="form-control" value="<?php echo $erow['vehicle']; ?>">
<option>select</option>
<option> RIN - 4546 </option>
<option> LES - 2200 </option>
<option> LES - 8732 </option>
<option> LES - 5884 </option>
<option> LES - 4964 </option>
<option> LES - 2150 </option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>COUPAN #</label>
<input type="text" name="coupan" class="form-control" value="<?php echo $erow['coupan']; ?>">
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label>INSTALLER NAME</label>
<input type="text" name="installername" class="form-control" value="<?php echo $erow['installername']; ?>">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Installation Date</label>
<input type="date" name="installationdate" class="form-control" value="<?php echo $erow['installationdate']; ?>">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>INSTALLATION STATUS</label>
<select name="installationstatus" class="form-control" value="<?php echo $erow['installationstatus']; ?>">
<option>select</option>
<option>PROCESSED</option>
<option>COMPLETED</option>
<option>FAILED</option>
<option>Installed in 2nd Attempt</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Remarks ( Delivery + installation )</label>
<input type="text" id="remarks" name="remarks" class="form-control" value="<?php echo $erow['remarks']; ?>">
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
<button type="submit" class="btn btn-warning"><span class="glyphicon glyphicon-check"></span> Save</button>
</div>
</form>
</div>
</div>
</div>
the plugins i used

Answer 1

The following article is an answer to a similiar question, you might wanna take a look: https://stackoverflow.com/a/16095583/12739653
If it didn't help you. Please provide some general information; Did you import all required files, what's your Bootstrap version?
If you're using Bootstrap 5, you might need to use data-bs-target and data-bs-toggle instead. Learn more here: https://getbootstrap.com/docs/5.0/components/modal/#live-demo

Answer 2

Just make sure that your <div class="modal fade" ...> is inside the <body>.