We Keep Coding

Bootstrap 5 - hide modal does not remove backdrop

Using Bootstrap 5 I create my modal:
var myModal = new bootstrap.Modal(document.getElementById('scheduleMeetingModal'), {
backdrop: 'static'
});
myModal.show();
On another function I want to hide that modal, and use:
var myModalEl = document.getElementById('scheduleMeetingModal');
var myModal = bootstrap.Modal.getInstance(myModalEl);
myModal.hide();
However the backdrop stays there. I'm not able to change the passed options to remove backdrop and can't find anything on the Bootstrap documentation.
I have tried the following with no success:
var myModalEl = document.getElementById('scheduleMeetingModal');
var myModal = bootstrap.Modal.getInstance(myModalEl);
myModal.hide();
myModal.modal({backdrop: false});
EDIT:
As requested, the html code for my modal:
<div class="modal" id="scheduleMeetingModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header d-flex justify-content-between">
<h5 class="modal-title" id="scheduleMeetingModalLabel"><?php echo lang('App.scheduleMeeting'); ?></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<?php echo form_open_multipart('schedule_meeting', 'id="schedule_meeting" class="needs-validation" novalidate=""'); ?>
<div class="modal-body">
<div class="row form-row">
<div class="col-md-6">
<div class="mb-3 feature-info-content">
<label class="form-label" for="day_one"><?php echo lang('App.day'); ?> *</label>
<input class="form-control" type="date" id="day_one" required name="day_one">
</div>
</div>
<div class="col-md-6">
<div class="mb-3 feature-info-content">
<label class="form-label" for="time_one"><?php echo lang('App.startTime'); ?> *</label>
<input class="form-control" type="time" id="time_one" required name="time_one">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" id="schedule_meeting" class="btn btn-primary ms-5"><?php echo lang('App.submit'); ?></button>
</div>
</div>
<?php echo form_close(); ?>
</div>
</div>

I have amended your code. Your javascript code was invalid that why its not working properly. Now I have fixed the issue. You can run this code and check it.
var modal = new bootstrap.Modal(
document.getElementById("scheduleMeetingModal")
);
function openModal() {
modal.show();
}
function closeModal() {
modal.hide();
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-primary" onclick="openModal()">Open Modal</button>
<!-- Modal -->
<div class="modal" id="scheduleMeetingModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header d-flex justify-content-between">
<h5 class="modal-title" id="scheduleMeetingModalLabel"><?php echo lang('App.scheduleMeeting'); ?></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="closeModal()"></button>
</div>
<?php echo form_open_multipart('schedule_meeting', 'id="schedule_meeting" class="needs-validation" novalidate=""'); ?>
<div class="modal-body">
<div class="row form-row">
<div class="col-md-6">
<div class="mb-3 feature-info-content">
<label class="form-label" for="day_one">
<?php echo lang('App.day'); ?> *</label>
<input class="form-control" type="date" id="day_one" required name="day_one"> </div>
</div>
<div class="col-md-6">
<div class="mb-3 feature-info-content">
<label class="form-label" for="time_one">
<?php echo lang('App.startTime'); ?> *</label>
<input class="form-control" type="time" id="time_one" required name="time_one"> </div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" id="schedule_meeting" class="btn btn-primary ms-5">
<?php echo lang('App.submit'); ?>
</button>
</div>
</div>
<?php echo form_close(); ?>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

The first answer made me realize that the modal instance was not being properly retrieve, so according to the Bootstrap 5 documentation you can set or retrieve an existing instance of the modal object.
So I changed my code as follows and it worked
var myModalEl = document.querySelector('#scheduleMeetingModal');
var myModal = bootstrap.Modal.getOrCreateInstance(myModalEl);
myModal.hide();
This hides the backdrop properly and does not involve changing my code any further nor declaring the modal instance globally.

var myModalEl = document.querySelector('#scheduleMeetingModal');
var myModal = bootstrap.Modal.getOrCreateInstance(myModalEl);
myModal.hide();
This solution not work for me, I add :
$('.modal-backdrop').hide();
to remove backdrop and it works.

I am trying to make seperate edit and delete on my CRM model but could not figure out how to bind those buttons with my field

I am trying to make separate edit and delete on my CRM model but could not figure out how to bind those buttons with my field although I have created the API for this in angular I need a bit help.
Thanks in advance
below is a bootstrap code of the edit and delete buttons
<div id="delete_department" class="modal custom-modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content modal-md">
<div class="modal-header">
<h4 class="modal-title">Delete Department</h4>
</div>
<div class="modal-body card-box">
<p>Are you sure want to delete this?</p>
<div class="m-t-20 text-left">
Close
<button type="submit" class="btn btn-danger" >Delete</button>
</div>
</div>
</div>
</div>
</div>
<div id="edit_department" class="modal custom-modal fade" role="dialog">
<div class="modal-dialog">
<button type="button" class="close" data-dismiss="modal" (click)="edit(list)">×</button>
<div class="modal-content modal-md">
<div class="modal-header">
<h4 class="modal-title">Edit Department</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label>Department Name <span class="text-danger">*</span></label>
<input class="form-control" value="IT Management" type="text">
</div>
<div class="m-t-20 text-center">
<button class="btn btn-primary btn-lg" (click)="edit(list)">Save Changes</button>
</div>
</form>
</div>
</div>
</div>
</div>

1: declare a property in your component eg: department,which store the current operate department object on edit button clicked
2: bind the property of department to edit dialog template
3: remove role="dialog" from your dialog template(beacuse you need to do something before dialog open,you must open dialog by yourself)
4: in your edit dialog button click function, you set property 'department' value to store current operate department,and append this code $('#edit_department').modal('show')

css selectors, set property for all except two tags

i have a modal and i try to implement nested comments
now i want to send the parent comment id to child comment in modal
button that show modal:
<button class="btn btn-xs btn-light" data-target="#commentModal" data-toggle="modal" data-parent="3">پاسخ</button>
<div class="modal fade" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="commentModal" aria-hidden="true" dir="rtl">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
<h4 id="modal-label-3" class="modal-title">ارسال نظر</h4>
</div>
<div class="modal-body">
<div class="respond-form" id="respond" style="padding-top: 0">
<form action="/comment" class="form-gray-fields">
{{ csrf_field() }}
<input type="hidden" name="parent_id" value="0">
<br>
<div class="row">
<div class="col-md-12">
<div class="form-group text-center">
<button class="btn btn-block" type="submit">ثبت دیدگاه</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
i want to send value of data-parent in button, to "vlaue" attribute of input in modal
i see this for bootstrap modals:
$('#commentModal').on('show.bs.modal' , function (event) {
let button = $(event.relatedTarget);
let parentId = button.data('parent');
let modal = $(this);
modal.find("[name='parent_id']").val(parentId);
});
but i do not use bootstrap and following code not working for me!

How about something like this?
$(".btn").on("click", function(){
$(".modal-body").find("[name=parent_id]").val($(this).data("parent"));
// Code to show modal
});

Bootstrap modal: dynamically load value in input field

I have a Bootstrap modal in a Laravel app that I'm trying to dynamically load. The idea is to fill the input fields in the modal with data coming from my database so I can update the values. I'm almost there....
I have the following in my view file:
Open modal
The 'data-id' and 'data-title' are passed to a JS function that looks as follows:
$(function() {
$('#edit-auction-modal').on("show.bs.modal", function (e) {
$("#auctionLabel").html('Edit auction with id '+ $(e.relatedTarget).data('id'));
$("#auctionTitle").html($(e.relatedTarget).data('title'));
});
});
This JS function captures the id and title successfully. In the below modal view, I can print out the id in the panel-title because I'm telling in JS to put the data in the id="auctionLabel".
<div class="row">
<div id="edit-auction-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title" id="auctionLabel"></div>
</div>
</div>
<div class="modal-body edit-content" style="padding-top:10px">
<form method="POST" action="{!! route('admin_auctions_update') !!}">
{{ csrf_field() }}
<div class="form-group">
<label for="auction_name" class="control-label">Auction name</label>
<input name="auction_name" id="name" class="form-control" placeholder="Auction name" value="{{$auction->auction_name}}">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success">Update auction</button>
</div>
</div>
</div>
</div>
</div>
My question is how I need to change the Javascript function in order to pre-fill the input fields with the value of the title. In other words, I want the value of the input box to contain the 'title' that I captured in the JS file.

Try this :
$('#edit-auction-modal').on("show.bs.modal", function (e) {
$("#auctionLabel").html('Edit auction with id '+ $(e.relatedTarget).data('id'));
$("#auctionTitle").html($(e.relatedTarget).data('title'));
$('#edit-auction-modal ').find('input#input-id').val($(e.relatedTarget).data('title'))
});

You can use .val( value ) to set/change the input value in jQuery.
http://api.jquery.com/val/#val2

load bootstrap modal as alert after inserting data to database

im new to php and still learning. i tried to customized bootstrap template and tried to connect a form to a database.
insert.php
$con=mysqli_connect("localhost","root","","finalproject");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$sql="INSERT INTO stokbarang (Merek, Tipe, Harga)
VALUES
('$_POST[merek]','$_POST[tipe]','$_POST[harga]')";
if (!mysqli_query($con,$sql))
{
die('Error: ' . mysqli_error($con));
}
header("Location: stock.php");
and a page where the form is stock.php, the form is below :
<form name="sentMessage" class="well" id="contactForm" novalidate action = "insert.php" method = "post">
<legend>Masukkan Data</legend>
<div class="control-group">
<div class="controls">
<label>Merek Mobil</label>
<input type="text" class="form-control" placeholder="Merek mobil" id="merek" required
data-validation-required-message="Masukkan Merek mobil" name = "merek"/>
<p class="help-block"></p>
</div>
</div>
<div class="control-group">
<div class="controls">
<label>Tipe Mobil</label>
<input type="text" class="form-control" placeholder="Tipe Mobil" id="email" required
data-validation-required-message="Masukkan tipe mobil" name = "tipe"/>
</div>
</div>
<div class="control-group">
<div class="controls">
<label>Harga</label>
<input type="number" class="form-control" placeholder="Harga"
id="email" required
data-validation-required-message="Masukkan harga mobil" name = "harga"/>
</div>
<br>
<div id="success"> </span></div> <!-- For success/fail messages -->
<br>
<button type="submit" class="btn btn-primary pull-right">Insert</button><br/><br>
</form>
the form is work and i can insert the data by clicking Insert button to database.
Now i want to add a modal as alert after the form is submitted to database in stock.php
i modified the Insert button as following
<button type="submit" class="btn btn-primary pull-right" data-toggle="modal" data-target="#myModal">Insert</button><br/><br>
here is the modal :
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" 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>
<h4 class="modal-title" id="myModalLabel">SUCCESS</h4>
</div>
<div class="modal-body">
<p>Data Inserted!!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
but it seems like the button only trigger the modal to appear without submit the form to database. Any suggestion to make the modal appear after successful inserting data to database (after redirecting to stock.php)? or maybe there is better way to make alert after redirect? thank you for your time and help :)

change the header location on insert.php as below :
header("Location: stock.php?sucsess=true");
then stock.php on the head :
<script type="text/javascript">
<?php
if ($_GET['sucsess'] =='true'){
echo '$(function() {
$( "#myModal" ).dialog();
});'
}
?>
</script>
here is a demo only for the alert demo