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?

回答1:

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

回答2:

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>

回答3:

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.

来源：https://stackoverflow.com/questions/53594423/how-to-open-a-bootstrap-modal-without-jquery-or-bootstrap-js-javascript

标签

javascript

bootstrap-4