التصميم المتمحور حول المستخدم User-Centered Design

<link rel="stylesheet" href="styles.css">

<button id="open-modal">فتح النافذة المنبثقة</button>

<dialog>
 <h2>اشترك في نشرتنا الإخبارية!</h2>
 <p>احصل على أحدث التحديثات والعروض.</p>
 <button>إشتراك</button>
 <button>إغلاق</button>
</dialog>

<script src="index.js"></script>
            

dialog {
 border: none;
 border-radius: 8px;
 padding: 20px;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

dialog::backdrop {
 background: rgba(0, 0, 0, 0.5);
}
    

const dialog = document.querySelector('dialog');
const closeButton = dialog.querySelector('button:last-of-type');
const openModalButton = document.getElementById('open-modal');

closeButton.addEventListener('click', () => {
  dialog.close();
});

openModalButton.addEventListener('click', () => {
  dialog.showModal();
});

// Close the modal when clicking outside of it
dialog.addEventListener('click', (event) => {
  const rect = dialog.getBoundingClientRect();
  const isInDialog = (
    event.clientX >= rect.left &&
    event.clientX <= rect.right &&
    event.clientY >= rect.top &&
    event.clientY <= rect.bottom
  );

  if (!isInDialog) {
    dialog.close();
  }
});
    

<link rel="stylesheet" href="styles.css">

<button id="open-modal">فتح النافذة المنبثقة</button>

<dialog>
 <h2>اشترك في نشرتنا الإخبارية!</h2>
 <p>احصل على أحدث التحديثات والعروض.</p>
 <button class="cta">إشتراك</button>
 <button class="close">إغلاق</button>
</dialog>

<script src="index.js"></script>
            

.cta {
 background-color: #007BF;
 color: white;
 border: none;
 padding: 10px 20px;
 border-radius: 4px;
 cursor: pointer;
}

.close {
 background-color: transparent;
 color: #007BFF;
 border: none;
 padding: 10px 20px;
 cursor: pointer;
}
    

const dialog = document.querySelector('dialog');
const closeButton = dialog.querySelector('.close');
const openModalButton = document.getElementById('open-modal');

closeButton.addEventListener('click', () => {
  dialog.close();
});

openModalButton.addEventListener('click', () => {
  dialog.showModal();
});

// Close the modal when clicking outside of it
dialog.addEventListener('click', (event) => {
  const rect = dialog.getBoundingClientRect();
  const isInDialog = (
    event.clientX >= rect.left &&
    event.clientX <= rect.right &&
    event.clientY >= rect.top &&
    event.clientY <= rect.bottom
  );

  if (!isInDialog) {
    dialog.close();
  }
});