Open bootstrap 5 modal
Here’s a simple example:
### HTML
<!-- Button to trigger -->
<button id="openModalBtn" class="btn btn-primary">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Bootstrap 5 Modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
This is a Bootstrap 5 modal opened with JavaScript.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>### JavaScript
document.getElementById("openModalBtn").addEventListener("click", function () {
var myModal = new bootstrap.Modal(document.getElementById("myModal"));
myModal.show();
});—
✅ **Key points**:
– Use `new bootstrap.Modal(element)` to create the modal instance.
– Call `.show()` to open it, `.hide()` to close it.
– You don’t need jQuery in Bootstrap 5; plain JS works.
—
Do you want me to also show you how to **programmatically close** the modal with JS (instead of the close button)?
You want your “ click to call `editWorkerModal({$ID})` and then open a Bootstrap 5 modal with ID `multiStepModal`.
Here’s how you can do it:
### HTML
<!-- Example link -->
<a href="javascript:void(0);" onclick="editWorkerModal(123)">Edit Worker</a>
<!-- Multi Step Modal -->
<div class="modal fade" id="multiStepModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Multi Step Modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
Modal body content goes here...
</div>
</div>
</div>
</div>### JavaScript
function editWorkerModal(id) {
var modal = new bootstrap.Modal(document.getElementById('multiStepModal'));
modal.show();
}This will open the modal with ID `multiStepModal` whenever your “ calls `editWorkerModal({$ID})`.
Do you also want me to show how to **pass that `id` into the modal content** (e.g. fill a hidden input or text inside)?
so replace in mdal form
with take form element name attribute like if name='FirstName' then get Model-FirstName-8 value of this and put into input FirstName
You already have hidden inputs like `Model-FirstName-8`, `Model-LastName-8` etc., and inside your **modal form** you have fields with `name="FirstName"`, `name="LastName"`, etc.
Here’s JS code for your `editWorkerModal(id)` function that will pull values from those hidden fields and populate the modal form:
function editWorkerModal(id) {
// List of fields you want to map
const fields = [
'FirstName',
'LastName',
'Email',
'Telefon',
'Fax',
'PositionUnterneehmen',
'Description',
'StandaardContact',
'ZusaEmail',
'Mobile',
'CountryCode',
'Titel'
];
fields.forEach(field => {
const hiddenInput = document.getElementById(`Model-${field}-${id}`);
if (hiddenInput) {
const modalInput = document.querySelector(`#multiStepModal [name="${field}"]`);
if (modalInput) {
modalInput.value = hiddenInput.value;
}
}
});
// finally show modal
var modal = new bootstrap.Modal(document.getElementById('multiStepModal'));
modal.show();
}—
⚡ How it works:
– It loops through all field names.
– For each one, it looks for a hidden input with `id="Model-{field}-{id}"`.
– If found, it sets the corresponding modal form input `[name="{field}"]` with that value.
– Then it opens the modal.
—
Do you want me to also handle **checkboxes / radios** separately (so if `StandaardContact` is `1`, it auto checks)?
Here’s the updated JS:
function editWorkerModal(id) {
const fields = [
'FirstName',
'LastName',
'Email',
'Telefon',
'Fax',
'PositionUnterneehmen',
'Description',
'StandaardContact',
'ZusaEmail',
'Mobile',
'CountryCode',
'Titel'
];
// fill normal inputs
fields.forEach(field => {
const hiddenInput = document.getElementById(`Model-${field}-${id}`);
if (hiddenInput) {
const modalInput = document.querySelector(`#multiStepModal [name="${field}"]`);
if (modalInput) {
modalInput.value = hiddenInput.value;
}
}
});
// handle Anrede radios
const hiddenAnrede = document.getElementById(`Model-Anrede-${id}`);
if (hiddenAnrede) {
const radios = document.querySelectorAll(`#multiStepModal [name="Anrede"]`);
radios.forEach(radio => {
radio.checked = (radio.value === hiddenAnrede.value);
});
}
// show modal
var modal = new bootstrap.Modal(document.getElementById('multiStepModal'));
modal.show();
}—
✅ This way:
– Text/hidden/normal fields get filled as before.
– `Anrede` radios inside the modal get checked based on the hidden value.
Do you also want me to auto-check **checkboxes like `StandaardContact`** when the hidden value is `"1"`?