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

Question

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?

a hacky way would be to simply copy-paste the boostrap modal jquery plug in into your javascript and call it without jquery nor bootstrap javascript (of course you would emulate in vanilla js all the jquery stuff needed by the modal, but it is doable ina few lines of javascript) — Nikos M.
– Nikos M., Commented Dec 3, 2018 at 13:04
Modals are simply fullscreen DIV's (position: fixed), with a z-index higher than the current page. You can also apply some trasparancy to this DIV to give a more pleasing view. — Keith
– Keith, Commented Dec 3, 2018 at 13:05
codepen.io/timothylong/pen/HhAer check this one. its a css model.. no need any kind of js. I hope it'll help — uday kyada
– uday kyada, Commented Dec 3, 2018 at 13:15

Daniel Santos · Accepted Answer · 2018-12-03 16:54:26Z

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

Mehdi bayat · Accepted Answer · 2019-12-18 08:26:44Z

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>

Emrah Tuncel · Accepted Answer · 2019-09-12 20:03:35Z

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.

Vlad Ankh · Accepted Answer · 2022-10-21 20:28:27Z

4

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

answered Oct 21, 2022 at 20:28

Vlad Ankh

981 silver badge5 bronze badges

Comments

Luke Vo · Accepted Answer · 2023-07-20 17:33:38Z

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.

Lepy · Accepted Answer · 2022-01-08 10:34:20Z

0

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

answered Jan 8, 2022 at 10:34

Lepy

1931 gold badge1 silver badge12 bronze badges

Comments

cigien · Accepted Answer · 2023-02-23 05:14:04Z

0

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.

edited Feb 23, 2023 at 5:14

cigien

61.2k11 gold badges86 silver badges124 bronze badges

answered Feb 23, 2023 at 2:02

life byweb

11 bronze badge

Collectives™ on Stack Overflow

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

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related