بستن پاپ‌آپ با کلیک بر روی فضای بیرونی با استفاده از jQuery

در بسیاری از مواقع، وقتی از پاپ‌آپ‌ها استفاده می‌کنیم، یکی از مشکلات رایج این است که کاربران بتوانند با کلیک بر فضای بیرون پاپ‌آپ، آن را ببندند. این ویژگی تجربه کاربری بهتری را فراهم می‌کند و نیاز به دکمه‌های بستن جداگانه را کاهش می‌دهد. در اینجا می‌خواهیم با استفاده از jQuery یک راه حل برای این موضوع ارائه دهیم.

به طور کلی، ما به یک لایه پوششی (overlay) نیاز داریم که بسته به وضعیت نمایش داده یا پنهان شود. این لایه پوششی می‌تواند تمام صفحه را بپوشاند و از طریق آن کاربران بتوانند پاپ‌آپ را ببندند. به عبارتی، با کلیک بر روی این لایه پوششی، پاپ‌آپ مخفی می‌شود.

ابتدا باید HTML و CSS مناسب برای ساختار و طراحی اولیه پاپ‌آپ و لایه پوششی را فراهم کنیم. سپس با استفاده از jQuery، عملکرد بستن پاپ‌آپ را پیاده‌سازی خواهیم کرد.

این روش مزیت‌های زیادی دارد، از جمله اینکه شما می‌توانید با کمترین تغییرات در ساختار موجود، این ویژگی را به پاپ‌آپ‌های خود اضافه کنید. در نتیجه، بهبود قابل توجهی در تجربه کاربری وب‌سایت خود ایجاد خواهید کرد.

بیایید با مثال کدهای عملی به شما نشان دهیم که چگونه این کار قابل انجام است.

مثال کد HTML و CSS

<!-- HTML Structure -->
<div id="popup" class="popup">
  <div class="content">
    <p>این یک پاپ‌آپ است</p>
  </div>
</div>
<div id="overlay" class="overlay"></div>

<!-- CSS Styling -->
<style>
  .overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
  }
  .popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    z-index: 1001;
  }
</style>

افزودن jQuery برای بستن پاپ‌آپ

<script>
$(document).ready(function() {
    $('#overlay').click(function() {
        $('#popup, #overlay').hide();
    });
    $('#popup').click(function(event) {
        event.stopPropagation();
    });
    // مثال برای نشان دادن پاپ‌آپ به صورت دستی
    $('#overlay, #popup').show();
});
</script>

توضیح خط به خط کد jQuery

$(document).ready(function() {...
در این خط، می‌خواهیم مطمئن شویم که تمامی عناصر DOM بارگذاری شده‌اند و سپس کد jQuery ما اجرا شود.

$('#overlay').click(function() {...
این خط حاوی تابعی است که با کلیک بر روی لایه پوششی (overlay) اجرا می‌شود.

$('#popup, #overlay').hide();
به محض اینکه کاربر روی overlay کلیک کرد، این خط پاپ‌آپ و overlay را پنهان می‌کند.

$('#popup').click(function(event) {...
با کلیک بر روی خود popup، جلوگیری می‌کنیم از اینکه کلیک به لایه زیرین یعنی overlay برسد و آن را ببندد.

event.stopPropagation();
این خط کلیک را از ادامه یافتن به والدین دیگر متوقف می‌کند، یعنی کلیک درون پاپ‌آپ باعث بسته شدن آن نمی‌شود.

$('#overlay, #popup').show();
در نهایت، با استفاده از این خط می‌توانید به صورت دستی پاپ‌آپ را نمایش دهد تا تعامل با آن تست شود.