CODEWITHSUNDEEP
javascriptbootstrap-4
Daniel Santos
Daniel Santos

Reputation: 15778

How to open a Bootstrap modal without jQuery or bootstrap.js javascript?

I'm working on a VERY LIGHT survey application. This application runs in third world countries in locations with very limited connection.

We found that the loading-time is proportional to user Engagement (Very important to us).

Today I'm using 2 libs - VueJS and a custom bootstrap build. I would like to invoke a modal. But the modal requires to add the Bootstrap Javascript and the jQuery. those libs almost doubles the loading time.

How can I open a modal without adding those two libs?

Upvotes: 30

Views: 45522

Answers (7)

Luke Vo
Luke Vo

Reputation: 20648

If you simply want to use Bootstrap for Modal CSS, this is what their Javascript renders. You simply need to use your own Javascript to toggle it (no animation obviously):

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

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

document.querySelector(".btn-show").addEventListener("click", () => {
  diag.classList.remove("d-none");
});
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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 is for the black backdrop behind the dialog.
  • The div with .modal needs d-block or else it would not show up (its CSS display: none) even with .show. The Javascript sets an inline display: block to it so we have to override it with d-block as well.
  • You need .show for both the .modal-backdrop and .modal.

Upvotes: 2

life byweb
life byweb

Reputation: 1

I try Laravel 9 and Bootstrap 5 without a jQuery for using Modal Bootstrap.

I doing delete the data: my modal id is = deleteModal.

  • 1- add wire:ignore.self in Div modal for open and stay open modal.

  • 2- at the end of function to deleted data insert

    $this->dispatchBrowserEvent('closeModal');

    that means call Event "closeModal" .

  • 3- add @stack('script') for listening to script.

  • 4- add

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

for close modal.

the div by class "modal-backdrop" at the end of html page that is dark at the background the Modal.

Upvotes: 0

Vlad Anoxun
Vlad Anoxun

Reputation: 88

If you are using bootstrap 5, you can easily show and hide modal with js:

Documentation

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

Upvotes: 3

Lepy
Lepy

Reputation: 194

If you open the modal using a button. you can add the bootstrap options to that button data-bs-toggle="modal" data-bs-target="#modalTarget" and also a onclick function like onclick="whenOpenModal();"

function whenOpenModal(){
   console.log("modal opened");
}

Upvotes: 0

Mehdi bayat
Mehdi bayat

Reputation: 189

You don't need any css style. You should create the bootstrap modal in your HTML, then in your js, you have to simply give it some style according to the following description:

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";
});

The HTML should be like this:

<!-- 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>

Upvotes: 10

Emrah Tuncel
Emrah Tuncel

Reputation: 749

We write private code for our 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 = () => { //MODAL SHOW
    modal.style.backgroundColor = 'rgba(0,0,0,0.5)';
    modal.style.display = 'block';
    setTimeout(() => { modal.style.opacity = 1; }); //FOR TRANSITION 
};
let closeStyle = () => { //MODAL HIDE
    modal.style.display = 'none';
    modal.style.opacity = 0;
};

//NO CLOSE MODAL WHEN YOU CLICK INSIDE MODAL
modalContentElm.onclick = () => {
    outerClick = false;
};

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


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

        closeStyle();

        if(btn.getAttribute('id') === 'success-btn'){
            //PLEASE WRITE 'success-btn' IN THE ID VALUE OF THE CONFIRM BUTTON
            console.log('Click Yes');
        }
        else{
            console.log('Click Cancel');
        }
        //..... more else if or else for more modal buttons

    };
}

Whenever we want to open modal

openStyle();

Whenever we want to close modal on manuel

closeStyle();

It's a bit laborious, but it works. A more general class can be written.

Upvotes: 4

Keith
Keith

Reputation: 24181

@uday's link to CSS only modal is a nice trick, but might be awkward to use if you use #tag's for other purposes (eg, Routing & param passing).

So here is an example that uses very little JS to achieve something very similar. I've tried to keep the Snippet as small as possible so that it's easy to see what's happening.

var modal = document.querySelector(".modal");
var container = modal.querySelector(".container");

document.querySelector("button").addEventListener("click", function (e) {
  modal.classList.remove("hidden")
});

document.querySelector(".modal").addEventListener("click", function (e) {
  if (e.target !== modal && e.target !== container) return;     
  modal.classList.add("hidden");
});
.modal {
  background-color: rgba(0,0,0,0.4); /* Transparent dimmed overlay */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: table;
}

.modal.hidden {
  display: none;
}

.modal .container {
 display: table-cell;
 text-align: center;
 vertical-align: middle;
 width: 200px;
}

.modal .body {
  box-shadow: 5px 10px #888888;
  display: inline-block;
  background-color: white;
  border: 1px solid black; 
  padding: 10px;
}
<button>Show Modal</button>

<div class="modal hidden">
  <div class="container">
    <div class="body">
      <p>Click outside this box to close the modal.<p>
      <p>You could of course add a close button etc</p>
      <p>But this is left for the OP todo</p> 
    </div>
  </div>
</div>

Upvotes: 16

Related Questions