ساخت پاپ آپ با css

مثال عملی برای شما:

How To Create Popups
https://www.w3schools.com/howto/howto_js_popup.asp

@emnaktins
بدون جاوا اسکریپت کارتون سخت میشه
برای جاوا اسکریپت مثال زیاد یک نمونه ش همینی که دوستمون فرستادن

اینم پاپ اپ فقط با سی اس اس
https://codepen.io/kazemi/pen/ZEJayrb

بدون جاوا اسکریپت خیلی سخته و اصلا توصیه نمیشه، اگه میلی به یادگیری جاوا اسکریپت ندارین کدش این هست:
html:

<button class="popup1 btn btn-primary">popup</button>
        <div class="popup">
            <h4>
                popup header
                <span class="popup-close"></span>
            </h4>
            <div>
                Lorem ipsum dolor, sit amet consectetur adipisicing, elit. Dolores ipsam, fuga illum at dicta recusandae non, aspernatur repellat. Veritatis quia modi laboriosam optio corporis saepe a quibusdam esse nulla atque? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Fugit, quidem iure vitae iusto. Porro error, magni quisquam sed aspernatur. Ea, animi autem rem error laboriosam fugit dolor pariatur impedit cumque! Lorem ipsum dolor sit, amet consectetur adipisicing, elit. Sit ullam odio praesentium, tempora, quaerat provident ipsa aperiam ad quae excepturi illum. Amet, dicta fugiat eius rem. Omnis, labore, ullam! Ut.
            </div>
            <button class="popup-close btn btn-secondary">close</button>
        </div>

css:

.popup-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    z-index: -1;
    transition: background-color 0.5s;
}

.popup-wrapper .popupshow {
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 0;
}

.popup {
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(100, 100, 100);
    border-radius: 10px;
    position: fixed;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s;
}

.popup .popupshow {
    opacity: 1;
    visibility: visible;
}

.popup h4, .popup div {
    padding: 15px 20px;
    border-bottom: 1px solid rgb(100, 100, 100);
}

.popup h4 span.popup-close:after {
    content: "\00D7";
    float: right;
    cursor: pointer;
}

.popup button.popup-close {
    float: right;
    margin: 15px 20px;
}

js:

let popupBtns = document.querySelectorAll(".popup-btn")

if (popupBtns) {
    var popupWrapper = document.createElement("div")
    popupWrapper.className = "popup-wrapper"
    document.body.prepend(popupWrapper)
}

popupBtns.forEach(popupBtn => {
    popupBtn.addEventListener("click", e => {
        let popup = popupBtn.nextElementSibling
        popup.classList.add("popupshow")
        popupWrapper.classList.add("show")

        let popupCloseFunction = e => {
            popup.classList.remove("popupshow")
            popupWrapper.classList.remove("popupshow")
        }

        let popupCloses = document.querySelectorAll(".popup-close")
        popupCloses.forEach(popupClose => {
            popupClose.addEventListener("click", popupCloseFunction)
        })
        popupWrapper.addEventListener("click", popupCloseFunction)
    })
})

البته کد جاوا اسکریپتش مخصوص همه پاپ آپ هاست و میتونید با توجه به کد html و css پاپ آپ های دیگه ای هم توی صفحه بوجود بیارین

اگه نمیخواید از جاوا اسکریپت استفاده کنید بهترین راه اینه که از شبه کلاس target استفاده کنید.
لینک نمونه
یه تگ a باید داشته باشیم که لینک شده باشه به آیدی نگهدارنده پاپ آپمون.
اون رو با css مخفی میکنیم و وقتی که توی target قرار داشت، نمایشش میدیم.
البته بهترین راه استفاده از جاوا اسکریپته.

دوستان سپاس🙏