¿Cómo abrir un modal de Bootstrap sin jQuery o bootstrap.js javascript?

Solución:

El enlace de @ uday a CSS solo modal es un buen truco, pero puede ser incómodo de usar si usa # etiquetas para otros propósitos (por ejemplo, enrutamiento y paso de parámetros).

Entonces, aquí hay un ejemplo que usa muy poco JS para lograr algo muy similar. Intenté mantener el fragmento lo más pequeño posible para que sea fácil ver lo que está sucediendo.

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>

No necesitas ningún estilo CSS. Debe crear el modal de arranque en su HTML, luego en su js, simplemente debe darle un poco de estilo de acuerdo con la siguiente descripción:

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

---

El HTML debería ser así:

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

Escribimos código privado para nuestro 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

    };
}

Siempre que queramos abrir modal

openStyle();

Siempre que queramos cerrar modal en manuel

closeStyle();

Es un poco laborioso, pero funciona. Se puede escribir una clase más general.

---

---

Utiliza Nuestro Buscador