Bu kodun içine eklerseniz sorun çözülüyor farklı fikir çıkana kadar bu şekilde devam edicem
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS Pop-Up Örneği</title> <style> #container{ margin:0 auto; width:80%; font-family: verdana,arial,sans-serif; font-size:16px; }
#modalWindow { position: fixed; font-family: arial,helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.4); z-index: 99999; opacity:0; transition: opacity 400ms linear; pointer-events: none; }
#modalWindow:target { opacity:1; pointer-events: auto; }
#modalWindow > div { width: 400px; height: 240px; position: relative; margin: 10% auto; padding: 20px 20px 13px 20px; border: solid; border-color: black; border-width : 2px; background: #DAF7A6; border-radius: 10px; }
</style>
</head> <body> <h1>CSS Pop-Up Örneği</h1> <a href="#modalWindow">Aç</a> <div id="container"> <p> Başlık Kısmı </p> </div> <div id="modalWindow"> <div> <a href="#close">Kapat X </a><br> <p> İçerik Kısmı <br><br> <button type="button">Buton eklemeye ne dersin?</button> </p> </div> </div> </body> </html>