To implement a Bootstrap modal in your HTML without needing any additional CSS styles, you can follow these steps:

var locModal = document.getElementById('locModal');
var btnclose = document.getElementById('w-change-close');
var btnShow= document.getElementById('w-change-location');

// Show the modal
btnShow.addEventListener('click', (e) => {
    locModal.style.display = "block";
    locModal.style.paddingRight = "17px";
    locModal.className="modal fade show"; 
});

// Hide the modal
btnclose.addEventListener('click', (e) => {
    locModal.style.display = "none";
    locModal.className="modal fade";
});

Your HTML structure should include the following code for the button trigger and modal:

<!-- Button trigger modal -->
<button id="w-change-location" type="button" class="btn btn-primary mt-3" data-toggle="modal" data-target="#locModal">
    Change Location
</button>

<!-- Modal -->
<div class="modal fade" id="locModal" tabindex="-1" role="dialog" aria-labelledby="locModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="locModalLabel">Choose Location</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="" id="w-form">
                    <div class="form-group">
                        <label for="city"> City</label>
                        <input type="text" class="form-control" id="city">
                    </div>
                    <div class="form-group">
                        <label for="state"> State </label>
                        <input type="text" class="form-control" id="state">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button id="w-change-close" type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button id="w-change-btn" type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

We have developed custom code to create our own modal.

let modal = document.getElementById('our-modal');
let modalContentElm = modal.querySelector('.modal-content');
let allModalButtons = modal.querySelectorAll('.modal-footer > .btn');
let outerClick = true;

let openStyle = () => { //DISPLAY MODAL
    modal.style.backgroundColor = 'rgba(0,0,0,0.5)';
    modal.style.display = 'block';
    setTimeout(() => { modal.style.opacity = 1; }); //FOR TRANSITION 
};
let closeStyle = () => { //HIDE MODAL
    modal.style.display = 'none';
    modal.style.opacity = 0;
};

//PREVENT CLOSING MODAL WHEN CLICKING INSIDE THE MODAL
modalContentElm.onclick = () => {
    outerClick = false;
};

//CLOSE MODAL WHEN CLICK OUTSIDE THE MODAL
modal.onclick = () => {
    if(outerClick){ closeStyle(); }
    outerClick = true;
};


for(let btn of allModalButtons){
    btn.onclick = () => {

        closeStyle();

        if(btn.getAttribute('id') === 'success-btn'){
            //MAKE SURE TO SET 'success-btn' AS ID FOR THE CONFIRM BUTTON
            console.log('Clicked Yes');
        }
        else{
            console.log('Clicked Cancel');
        }
        //..... add more conditions for other modal buttons

    };
}

To open the modal, use the following:

openStyle();

To manually close the modal, use the following:

closeStyle();

Although a bit cumbersome, this method is effective. A more universal class could streamline the process.

If you're working with bootstrap 5, it's simple to display or conceal a modal using JavaScript:

Check out the documentation here

const customModal = new bootstrap.Modal(document.getElementById('customModal')); // creating modal object
customModal.show(); // show modal
customModal.hide(); // hide modal

If you are looking to implement Bootstrap Modal CSS, here is a simple Javascript snippet that demonstrates how to toggle the modal:

const dialog = document.querySelector(".modal-container");

document.querySelector(".btn-close").addEventListener("click", () => {
  dialog.classList.add("d-none");
});

document.querySelector(".btn-show").addEventListener("click", () => {
  dialog.classList.remove("d-none");
});

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aac8c5c5ded9ded8cbdaea9f84988499">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<button class="btn-show btn btn-primary">Show Dialog</button>

<div class="modal-container d-none">
  <div class="modal-backdrop show"></div>
  <div class="modal show d-block" tabindex="-1">
      <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-header">
                  <h5 class="modal-title">
                      Dialog Title
                  </h5>
                  <button class="btn-close"></button>
              </div>
              <div class="modal-body text-center">
                  Dialog Content
              </div>
          </div>
      </div>
  </div>
</div>

• .modal-backdrop creates the black backdrop behind the dialog.
• The div with .modal needs to have d-block for it to display correctly as the default CSS property is set to display: none.
• Make sure to include .show classes for both the .modal-backdrop and .modal.

To activate the modal using a button, simply include the bootstrap options in the button tag:

data-bs-toggle="modal" data-bs-target="#modalTarget"

function openModal(){
   console.log("Modal is now open");
}

Experimenting with Laravel 9 and Bootstrap 5, I successfully implemented a modal without using jQuery.

Here is the process I followed to delete data utilizing the modal named deleteModal:

• 1- Placed wire:ignore.self in the Div modal to ensure it opens and remains open.

• 2- Added the following line at the end of the function for deleting data:

  $this->dispatchBrowserEvent('closeModal');

  This triggers the event named "closeModal".

• 3- Included @stack('script') to listen for scripts.

• 4- Inserted the script below:

@push('script')
    <script>
        window.addEventListener('closeModal', event => {
            document.querySelector('#deleteModal').style.display = "none";
            document.querySelector('.modal-backdrop').remove();
        })
    </script>
@endpush

This script handles the closing of the modal.

The dark background behind the Modal is created by the div with the class "modal-backdrop" placed at the end of the HTML page.