Bootstrap 5 - hide modal does not remove backdrop - javascript

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.

Related

The PUT method is not supported for this route. Supported methods: POST. in laravel 8

hello i have problem ith my filter table fitur, how to solved this problem The PUT method is not supported for this route. Supported methods: POST. ?
this is the button in my blade view
<!-- Modal Add Tanggal -->
<div class="modal fade" id="addTanggal" tabindex="-1" role="dialog" aria-labelledby="addTanggalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content ">
<div class="modal-header">
<h5 class="modal-title mb-0" id="addTanggalLabel">Pilih Periode Transaksi</h5>
</div>
<div class="modal-body">
<!-- Card body -->
<form role="form" action="{{ route('rekap.penjualan.filter') }}" method="POST">
#csrf
#method('put')
<div class="row input-daterange datepicker align-items-center">
<div class="col">
<div class="form-group">
<label class="form-control-label">Awal Tanggal</label>
<input class="form-control" id="created_at" name="awal" placeholder="Awal Tanggal" type="text" value="">
</div>
</div>
<div class="col">
<div class="form-group">
<label class="form-control-label">Akhir Tanggal</label>
<input class="form-control" name="akhir" placeholder="Akhir Tanggal" type="text" value="">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Lihat Data</button>
</div>
</form>
</div>
</div>
</div>
this is the route
//rekapan transaksi Penjualan
Route::get('rekapan/penjualan', '\App\Http\Controllers\TransaksiController#rekappenjualan')->name('rekap.penjualan');
Route::post('rekapan/penjualan/filter', '\App\Http\Controllers\TransaksiController#rekapfilter')->name('rekap.penjualan.filter');
Route::delete('rekapan/penjualan/delete/{id}', '\App\Http\Controllers\TransaksiController#delete')->name('rekap.penjualan.delete')->middleware('admin');
Route::get('rekapan/penjualan/detail', '\App\Http\Controllers\TransaksiController#detailrekappenjualan')->name('rekap.penjualan.detail');
this is the controller
public function rekapfilter(Request $request)
{
$start = $request->awal;
$end = $request->akhir;
$transaksis = Transaksi::select('kode_transaksi', 'bayar', 'kembali', 'created_at', DB::raw('sum(total_barang) as total_beli'), 'subtotal', 'user_id', 'daftar_pelanggan_id')
->groupBy('kode_transaksi', 'bayar', 'kembali', 'created_at', 'subtotal', 'user_id', 'daftar_pelanggan_id')
->whereBetween(DB::raw('DATE(created_at)'), array($start, $end))->get();
return view('pages.rekapan.penjualan', compact('transaksis'));
}
Try removing #method('put') in you blade template,
Or change this
Route::post('rekapan/penjualan/filter', '\App\Http\Controllers\TransaksiController#rekapfilter')->name('rekap.penjualan.filter');
Onto this
Route::put('rekapan/penjualan/filter', '\App\Http\Controllers\TransaksiController#rekapfilter')->name('rekap.penjualan.filter');

Only first button to open bootstrap model works in while loop

I am trying to make a forum, and a have made to open bootstrap modal when someone clicks on Reply Button, but that button is in while loop and modal opens only on first button in row.
This is while loop
$sql = $conn->prepare("SELECT * FROM forum_answers WHERE topicId = :id");
$sql->bindValue(":id", $id);
$sql->execute();
while($row = $sql->fetch(PDO::FETCH_ASSOC))
{
if($row['quote'] == "")
{
?>
<div class="card">
<div class="card-header">
<div class="row">
<div class="col-md-6">
<b><?php echo $row['uid']; ?></b>
</div>
<div class="col-md-6 text-right">
<?php echo $row['date']; ?>
</div>
</div>
</div>
<div class="card-body">
<p class="card-text"><?php echo $row['answer']; ?></p>
<a class="btn btn-primary" id="btnAddReply"><i class="fas fa-fw fa-reply"></i> Reply</a>
</div>
</div>
<?php
}
else
{
?>
<div class="card">
<div class="card-header">
<div class="row">
<div class="col-md-6">
<b><?php echo $row['uid']; ?></b>
</div>
<div class="col-md-6 text-right">
<?php echo $row['date']; ?>
</div>
</div>
</div>
<div class="card-body">
<blockquote class="blockquote" style="background-color: #F8F8F8;"><?php echo $row['quote']; ?></blockquote>
<p class="card-text"><?php echo $row['answer']; ?></p>
<a class="btn btn-primary" id="btnAddReply"><i class="fas fa-fw fa-reply"></i> Reply</a>
</div>
</div>
<?php
}
}
This is a modal.
<div class="modal fade" id="addReply" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Add Reply</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form method="post" enctype="multipart/form-data">
<div class="modal-body">
<div class="form-group">
<label for="exampleInputEmail1">Quote</label>
<?php
$sql = $conn->prepare("SELECT answer FROM forum_answers WHERE id=:id");
$sql->bindValue(":id", $id);
$sql->execute();
while($row = $sql->fetch(PDO::FETCH_ASSOC))
{
?>
<textarea class="form-control rounded-0" name="quote" id="exampleFormControlTextarea1" rows="4" disabled><?php echo $row['answer']; ?></textarea>
<?php
}
?>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Answer</label>
<textarea class="form-control" id="desc1" cols="40" rows="3" name="answer" required></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary" name="submit3" value="Reply">
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$("#btnAddReply").click(function() {
$("#addReply").modal();
});
});
</script>
I don't know how to use class instead id in bootstrap, I am not so great with javascript.
if you have more than one id with the same name it by default select the first one with the name when js on click event trigger in your case.
you can use jQuery like operator to trigger on click event for all the ids with name btnAddReply
<script>
$(document).ready(function() {
$("[id^=btnAddReply]").click(function() {
$("#addReply").modal();
});
});
</script>
but a clean and better solution is to use a common class. instead of id in your HTML give the class with name btnAddReply
<script>
$(document).ready(function() {
$(".btnAddReply").click(function() {
$("#addReply").modal();
});
});
</script>

pass javascript variable to modal popup form

On click of .change_Nodes class I'm getting value of "id", On confirm box(Yes) I need to pass JavaScript value to modal popup named as #custom_script_modal.
$(document).on("click",".Change_Nodes",function(){
cmd_name = $(this).attr("id");
if(confirm("Sure to Update \""+cmd_name+"\" Command Executable Nodes?"))
{
$('#custom_script_modal').modal('show');
}
else
{ return false; }
}
); //update: removed extra curly brace
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal fade" id="custom_script_modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title text-center" id="custom_script_data_modal">Update Custom Script Executable Nodes</h4>
</div>
<div class="modal-body">
<form method="POST" id="custom_script_modal">
<label class="control-label col-sm-4" for="cmd">List of Nodes</label>
<div class="col-sm-8 tab-pan fade in active">
<select size="3" name="popup_hostlist[]" id="popup_hostlist" class="dis_tab" multiple>
<?php
//-----------Database echo "<option value='". $row['NodeName'] . "'>". $row['NodeName'] ."</option>";
?>
</select>
</div>
<div class="form-group">
<button type="submit" class="btn btn-info form-control">Update</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
As far I understand - you want to change dynamic values for "cmd_name" variable and change it while making any particular selection on the UI and re-use the same modal snippet for those actions.
Set a data attribute on actionable elements for "cmd_name" and access the same variable when prompting the user.
Check out the following JSFiddle and let me know if helps with your case:
(https://jsfiddle.net/sunnysharma/xpvt214o/950935/)

modal on the top and i cant change the width

The modal is in the top of webpage and I cant edit the width of the modal
css
.modal-dialog {
width:1000px;
}
head tag code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
The modal code in the html body tag. is there any wrong in my code ?
<div class="modal fade" id="account" 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>
<center><h4 class="modal-title" id="myModalLabel">My Account</h4></center>
</div>
<div class="modal-body">
<div class="container-fluid">
<form method="POST" action="update_account.php">
<div style="height: 10px;"></div>
<div class="form-group input-group">
<span class="input-group-addon" style="width:150px;">Name:</span>
<input type="text" style="width:350px;" class="form-control" name="mname" value="<?php echo $srow['uname']; ?>">
</div>
<div class="form-group input-group">
<span class="input-group-addon" style="width:150px;">Username:</span>
<input type="text" style="width:350px;" class="form-control" name="musername" value="<?php echo $srow['username']; ?>">
</div>
<div class="form-group input-group">
<span class="input-group-addon" style="width:150px;">Password:</span>
<input type="password" style="width:350px;" class="form-control" name="mpassword" value="<?php echo $srow['password']; ?>">
</div>
<hr>
<span>Enter current password to save changes:</span>
<div style="height: 10px;"></div>
<div class="form-group input-group">
<span class="input-group-addon" style="width:150px;">Password:</span>
<input type="password" style="width:350px;" class="form-control" name="cpassword">
</div>
<div class="form-group input-group">
<span class="input-group-addon" style="width:150px;">Confirm Password:</span>
<input type="password" style="width:350px;" class="form-control" name="apassword">
</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-success"><span class="glyphicon glyphicon-check"></span> Update</button>
</form>
</div>
</div>
</div>
</div>
how can I make it fixed?
If you are using Bootstrap for CSS, you could use the modal-lg and modal-sm classes to change the width of the modal, Eg:
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
...
</div>
</div>
Also you can use the !important to force redimention the modal with, like said #geoidesic.
.modal-dialog {
width:1000px !important;
}
More information on Bootstrap Modal
Most of these jquery plugins have default CSS that they use, which may be overriding your own CSS. You can try add !important...
.modal-dialog {
width:1000px !important;
}
Note that using !important is usually not a good idea but it should at least confirm that this is the issue.
The right way to set width for this plugin though is probably to send it as a parameter when you call the modal. See the API documentation for the width parameter:
http://api.jqueryui.com/dialog/

How to show a bootsrap modal popup using inside php code

I want to display this modal popup after php condition check
<div id="myModal65" class="modal fade">
<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">Subscribe our Newsletter</h4>
</div>
<div class="modal-body">
<p>Subscribe to our mailing list to get the latest updates straight in your inbox.</p>
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email Address">
</div>
<button type="submit" class="btn btn-primary">Subscribe</button>
</form>
</div>
</div>
</div>
</div>
in this php code used for display the popup. But it cannot display.
<?php
if($intwschdle==1)
{
echo "<script type='text/javascript'>$('#myModal65').modal('show');</script>";
}
?>
I think it's much better if you show you modal by default and put it in the php condition like :
<?php
if($intwschdle==1){
?>
<!--full html for modal goes here showing by default - - >
<?php } ? >

Categories