Php Web Sitesine Popup Eklenecek

30-11-2024, 18:57:16

#1

RBMedya

Gold üye

iş verildi.

30-11-2024, 18:57:41

#2

darkness06

TUMBLR OTO YON PANELI

merhabalar yardimci olalim hocam

30-11-2024, 19:06:33

#3

RBMedya

Gold üye

darkness06 adlı üyeden alıntı: mesajı görüntüle

merhabalar yardimci olalim hocam

arayış devam etmekte.

30-11-2024, 19:13:24

#4

akat

RBMedya adlı üyeden alıntı: mesajı görüntüle

arayış devam etmekte.

Konuyu baltaladım

30-11-2024, 19:17:22

#5

def2easy

özel mesaj atmıştım fakat dönüş yapma zahmetinde bile bulunmamışsınız. Ücretsiz entegrasyon yapacaktim, buyrun bu kodları kullanarak ios, Android uyumlu açılır pencere kullanabilirsiniz. Kendim bizzat kullanıyorum; iyi çalışmalar.

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobil Uyumlu Popup</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>


<button id="openModalBtn">Popup Aç</button>


<div id="myModal" class="modal">
<div class="modal-content">
<span class="close" id="closeModalBtn">×</span>
<h2>Mobil Uyumlu Popup</h2>
<p>Bu bir mobil uyumlu popup örneğidir.</p>
</div>
</div>

<script src="script.js"></script>
</body>
</html>

styles.CSS:
/* Genel stil */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}

/* Popup'ın başlangıçta gizli olması */
.popup {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}

/* Popup içeriği */
.popup-content {
background-color: white;
margin: 15% auto;
padding: 20px;
border-radius: 5px;
width: 80%;
max-width: 400px;
}

/* Kapatma butonu */
.close {
color: #aaa;
font-size: 28px;
font-weight: bold;
position: absolute;
top: 10px;
right: 20px;
}

.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

/* Duyarlı Tasarım */
@media screen and (max-width: 600px) {
.popup-content {
width: 90%;
}
}

Script.js
// Popup'ı açma
const openPopup = document.getElementById('openPopup');
const popup = document.getElementById('popup');
const closePopup = document.getElementById('closePopup');

// Popup'ı açmak için butona tıklama
openPopup.addEventListener('click', () => {
popup.style.display = 'block';
});

// Popup'ı kapatmak için çarpı işaretine tıklama
closePopup.addEventListener('click', () => {
popup.style.display = 'none';
});

// Popup dışında bir yere tıklayınca popup'ı kapatma
window.addEventListener('click', (event) => {
if (event.target === popup) {
popup.style.display = 'none';
}
});

30-11-2024, 19:21:17

#6

codingod

Pm gonderildi

30-11-2024, 19:45:09

#7

RBMedya

Gold üye

akat adlı üyeden alıntı: mesajı görüntüle

250₺ ekleyebilirim hocam

def2easy adlı üyeden alıntı: mesajı görüntüle

özel mesaj atmıştım fakat dönüş yapma zahmetinde bile bulunmamışsınız. Ücretsiz entegrasyon yapacaktim, buyrun bu kodları kullanarak ios, Android uyumlu açılır pencere kullanabilirsiniz. Kendim bizzat kullanıyorum; iyi çalışmalar.

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobil Uyumlu Popup</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>


<button id="openModalBtn">Popup Aç</button>


<div id="myModal" class="modal">
<div class="modal-content">
<span class="close" id="closeModalBtn">×</span>
<h2>Mobil Uyumlu Popup</h2>
<p>Bu bir mobil uyumlu popup örneğidir.</p>
</div>
</div>

<script src="script.js"></script>
</body>
</html>

styles.CSS:
/* Genel stil */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}

/* Popup'ın başlangıçta gizli olması */
.popup {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}

/* Popup içeriği */
.popup-content {
background-color: white;
margin: 15% auto;
padding: 20px;
border-radius: 5px;
width: 80%;
max-width: 400px;
}

/* Kapatma butonu */
.close {
color: #aaa;
font-size: 28px;
font-weight: bold;
position: absolute;
top: 10px;
right: 20px;
}

.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

/* Duyarlı Tasarım */
@media screen and (max-width: 600px) {
.popup-content {
width: 90%;
}
}

Script.js
// Popup'ı açma
const openPopup = document.getElementById('openPopup');
const popup = document.getElementById('popup');
const closePopup = document.getElementById('closePopup');

// Popup'ı açmak için butona tıklama
openPopup.addEventListener('click', () => {
popup.style.display = 'block';
});

// Popup'ı kapatmak için çarpı işaretine tıklama
closePopup.addEventListener('click', () => {
popup.style.display = 'none';
});

// Popup dışında bir yere tıklayınca popup'ı kapatma
window.addEventListener('click', (event) => {
if (event.target === popup) {
popup.style.display = 'none';
}
});

codingod adlı üyeden alıntı: mesajı görüntüle

Pm gonderildi

işi referanslı birine vermek istiyorum.. o yüzden kusura bakmayın..

30-11-2024, 21:12:12

#8

Protex

Pm gönderildi..

30-11-2024, 23:17:06

#9

MehmetErenYasar

Merhaba, imzamdan ulaşabilirsiniz.