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

Por fin luego de mucho batallar pudimos encontrar el arreglo de esta traba que ciertos lectores de este sitio han tenido. Si deseas compartir algún detalle no dudes en aportar tu comentario.

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;

Show Modal


  

    

      
Click outside this box to close the modal.

      
You could of course add a close button etc
      
But this is left for the OP todo
 
    
  

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í:

                Change Location
   
    
    

        

        

            

                
Choose Location
                
                    ×
                
            
            

                

                    

                         City
                        
                    
                    

                         State 
                        
                    
                
            
            

                Close
                Save changes
            
        
    

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.

Tienes la opción de añadir valor a nuestro contenido cooperando tu experiencia en las crónicas.

---

---

Utiliza Nuestro Buscador