Блог

 // Get DOM Elements
const modal = document.querySelector('#my-modal');
const modalBtn = document.querySelector('#modal-btn');
const closeBtn = document.querySelector('.close');

const modal2 = document.querySelector('#my-modal2');
const modalBtn2 = document.querySelector('#modal-btn2');
const closeBtn2 = document.querySelector('.close');
// Events
modalBtn.addEventListener('click', openModal);
closeBtn.addEventListener('click', closeModal);
window.addEventListener('click', outsideClick);

modalBtn2.addEventListener('click', openModal);
closeBtn2.addEventListener('click', closeModal);
window.addEventListener('click', outsideClick);

// Open
function openModal() {
  modal.style.display = 'block';
}

// Close
function closeModal() {
  modal.style.display = 'none';
}

// Close If Outside Click
function outsideClick(e) {
  if (e.target == modal) {
    modal.style.display = 'none';
  }
} 

 /**
{
    margin: 0;
    padding: 0;
    font-family: Verdana,Geneva,sans-serif; 
}*/

.team-section
{
    background: #f1f2f6;
    text-align: center;
}

.inner-width
{
    max-width: 1200px;
    margin: auto;
    padding: 40px;
    color: #333;
    overflow: hidden;
}

.team-section h1
{
    font-size: 20px;
    text-transform: uppercase;
    display: inline-block;
    border-bottom: 4px solid;
    padding-bottom: 10px;
}

.pe
{
    float: left;
    width: calc(100% / 3);
    overflow: hidden;
    padding: 40px 0;
    transition: 0.4s;
}

.pe:hover
{
    background: #dfe4ea;
}

.pe img
{
    width:250px;
    height: 250px;
    border-radius: 50%;
        
}

.p-name
{
    margin: 5px;
    text-transform: uppercase;
        color: #70AD47;
}

.p-des
{
    font-style: italic;
    color: #006600;
}

.p-sm
{
    margin-top: 16px;
}

.p-sm a
{
    margin: 0 4px;
    display: inline-block;
    width: 30px;
    height: 30px;
    transition: 0.4s;
}

.p-sm a:hover
{
    transform: scale(1.3);
}

.p-sm a i
{
    color: #333;
    line-height: 30px;
}

@media screen and (max-width: 960px) {
    .pe{
        width: 45%;
    }
}
@media screen and (max-width: 768px) {
    .pe{
        width: 50%;
    }
}
@media screen and (max-width: 600px) {
    .pe{
        width: 100%;
    }
}

:root {
  --modal-duration: 1s;
  --modal-color: #70AD47;
}

.button {
  background: #006600;
  padding: 1em 2em;
  color: #fff;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  margin: 10px;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  margin: 10% auto;
  width: 60%;
  box-shadow: 0 5px 8px 0 rgba(112, 173, 71), 0 7px 20px 0 rgba(112, 173, 71);
  animation-name: modalopen;
  animation-duration: var(--modal-duration);
}

.modal-header h2,
.modal-footer h3 {
  margin: 0;
}

.modal-header {
  background: var(--modal-color);
  padding: 15px;
  color: white;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.modal-body {
  padding: 10px 20px;
  background: #fff;
}

.modal-footer {
  background: var(--modal-color);
  padding: 10px;
  color: #fff;
  text-align: center;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.close {
  color: #ccc;
  float: right;
  font-size: 30px;
  color: #fff;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

@keyframes modalopen {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
} 

 <div class="team-section">
<div class="inner-width">
<div class="pers">
<div class="pe">

<img class="alignnone size-medium wp-image-763" src="https://www.patientguard.co.uk/wp-content/uploads/2021/10/David-full-colour-photo-2-253x300.jpg" alt="" width="253" height="300" />
<div class="p-name">David Small</div>
<div class="p-des">Director of Innovation and Strategy</div>
<p style="text-align: center;"><button id="modal-btn" class="button">Read More</button>
<div id="my-modal" class="modal">
    <div class="modal-content">
      <div class="modal-header">
        <span class="close">amp;times;</span>
        <h2>David Small</h2>
      </div>
      <div class="modal-body">
       <p>David Small is the founder and Managing Director here at Patient Guard Group. David worked for the MHRA as a Higher Medical Device Specialist and with Industry in 
QA, RA and Project Leader Roles, helping to develop Medical Devices and gain regulatory approval for them. In 2017 David spotted an opportunity in the market for a no nonsense approach to Medical Device consulting, reducing technical jargon and making QA and RA easy to understand to business owners and businesses who 
manufacture, distribute or own label Medical Devices, and hence Patient Guard was born.</p>
<div class="modal-footer">
        <h3></h3>
      </div>
      </div>
    </div>
  </div>

</div>

<div class="pe">

<img class="alignnone size-medium wp-image-757" src="https://www.patientguard.co.uk/wp-content/uploads/2021/10/Paul-full-colour-photo-2-267x300.jpg" alt="" width="267" height="300" />
<div class="p-name">Paul Mccann</div>
<div class="p-des">Finance Director</div>
<p style="text-align: center;"><button id="modal-btn2" class="button">Read More</button>
<div id="my-modal2" class="modal2">
    <div class="modal-content">
      <div class="modal-header">
        <span class="close">amp;times;</span>
        <h2>Paul Mccann</h2>
      </div>
      <div class="modal-body">
       <p>Paul is the finance director of Patient Guard Ltd.</p>
<div class="modal-footer">
        <h3></h3>
      </div>
</div>
</div>
</div>
</div>