I need you to open the same modal for all the buttons, the problem is that all the solutions I have found come with bootstrap and because of the css I am handling I can not add the bootstrap ...
.bx--btn{
font-family:"ibm-plex-sans",Helvetica Neue,Arial,sans-serif;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
letter-spacing:0;
cursor:pointer;
display:-ms-inline-flexbox;
display:inline-flex;
-ms-flex-align:center;
align-items:center;
-ms-flex-pack:center;
justify-content:center;
-ms-flex-negative:0;
flex-shrink:0;
font-size:.875rem;
font-weight:600;
height:2.5rem;
padding:0 1rem;
border-radius:0;
text-align:center;
text-decoration:none;
transition-duration:250ms;
transition-timing-function:ease-in;
white-space:nowrap;
line-height:16px
}
.bx--btn--primary{
background-color:#3d70b2;
border-width:2px;
font-size: 16px;
border-style:solid;
border-color:transparent;
color:#fff
}
.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transform: scale(1.1);
transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
z-index: 2;
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 1rem 1.5rem;
width: 24rem;
border-radius: 0.5rem;
animation-name: modal;
animation-duration: 1s;
}
.close-button {
float: right;
width: 1.5rem;
line-height: 1.5rem;
text-align: center;
cursor: pointer;
border-radius: 0.25rem;
background-color: lightgray;
}
.close-button:hover {
background-color: darkgray;
}
.show-modal {
opacity: 1;
visibility: visible;
transform: scale(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
@keyframes modal{
from{top:-330px; opacity:0;}
to{top:0; opacity:1;}
}<html>
<body>
<button class="trigger bx--btn bx--btn--primary">Ver</button>
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<h1>Hello, I am a modal!</h1>
</div>
</div>
<button class="trigger bx--btn bx--btn--primary">Ver</button>
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<h1>Hello, I am a modal!</h1>
</div>
</div>
<script>
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
</script>
</body>
</html>