Merhabalar, Sitemde popup yapacağım ama ekranın tam ortasında kare şeklinde gibi açılır ekran kodu yazabilir misiniz?

Bunun kodunu yazar mısınız?

11-09-2023, 21:39:08

#1

soylenmezsmt

Merhabalar,

Sitemde popup yapacağım ama ekranın tam ortasında kare şeklinde gibi açılır ekran kodu yazabilir misiniz?

11-09-2023, 21:43:31

<!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <link rel="stylesheet" href="styles.css">    <title>Geniş Ekran Popup</title> </head> <body>    <button id="showPopup">Popup Göster</button>    <div id="popup" class="popup">        <div class="popup-content">            <span class="close" id="closePopup">&times;</span>            <h2>Geniş Ekran Popup Başlığı</h2>            <p>Bu bir geniş ekran popup içeriğidir.</p>        </div>    </div>    <script src="script.js"></script> </body> </html>

body {    font-family: Arial, sans-serif; } .popup {    display: none;    position: fixed;    top: 0;    left: 0;    width: 100%;    height: 100%;    background-color: rgba(0, 0, 0, 0.7);    z-index: 1; } .popup-content {    background-color: #fff;    max-width: 800px;    margin: 20px auto;    padding: 20px;    border-radius: 5px;    position: relative; } .close {    position: absolute;    top: 10px;    right: 10px;    font-size: 20px;    cursor: pointer; } button {    padding: 10px 20px;    background-color: #007bff;    color: #fff;    border: none;    border-radius: 5px;    cursor: pointer; } button:hover {    background-color: #0056b3;

document.getElementById("showPopup").addEventListener("click", function() {
document.getElementById("popup").style.display = "block";
});

document.getElementById("closePopup").addEventListener("click", function() {
document.getElementById("popup").style.display = "none";
});