<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait">
<div class="container" style="font-family: 'Strait', sans-serif;">
<h3>İnternet Bağlantısı Kontrolü (Modal Diyalog, 3s Auto-Kapanma)</h3>
<p>Bağlantı durumu değiştiğinde ortada **Bootstrap Modal** diyalog gösterir.</p>
<div id="result">Durum bilinmiyor...</div>
<button id="manualCheck" class="btn btn-primary btn-check">Anında Kontrol Et</button>
</div>
<div class="modal fade" id="internetModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header danger">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="modal-title">Bağlantı Kontrol Ediliyor...</h4>
</div>
<div class="modal-body">
<p id="modal-body-text">Bağlantı durumunuz kontrol ediliyor. Lütfen bekleyin...</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Tamam</button>
</div>
</div>
</div>
</div>
<br><br>
<div id="satır" class="clearfix btn-group-sm" style="width: 100%;">
<div class="pull-left " role="group">
<a href="#" class="btn btn-success tooltips" data-placement="top" data-toggle="tooltip" data-original-title="Edit">
<i class="fa fa-pencil"></i> soldaki button 1
</a>
<a href="#" class="btn btn-danger tooltips" data-placement="top" data-toggle="tooltip" data-original-title="Delete">
<i class="fa fa-close"></i> soldaki button2
</a>
</div>
<div class="pull-right " role="group">
<a href="#" class="btn btn-warning tooltips" data-placement="top" data-toggle="tooltip" data-original-title="Delete">
<i class="fa fa-close"></i> sağdaki buton 1
</a>
<a href="#" class="btn btn-info tooltips" data-placement="top" data-toggle="tooltip" data-original-title="Delete">
<i class="fa fa-close"></i> Sağdaki button 2
</a>
</div>
</div>
</body>
body { padding: 24px; font-family: Arial, Helvetica, sans-serif; }
#result { margin-top: 20px; font-size: 18px; }
.btn-check { margin-top: 12px; }
/* Modal Stilleri */
#internetModal .modal-header.danger {
background-color: #b91c1c; /* Kırmızı başlık */
color: white;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom: none;
}
#internetModal .modal-header.success {
background-color: #166534; /* Yeşil başlık */
color: white;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom: none;
}
/* Kapatma butonu, görünür hale getirildi */
#internetModal .close {
display: block;
color: white; /* Kırmızı başlıkta görünmesi için */
opacity: 0.8;
}
const PING_URL_BASE = "https://www.google.com/favicon.ico";
const PING_TIMEOUT_MS = 4000;
const POLL_INTERVAL_MS = 3000;
const AUTO_HIDE_DURATION = 3000; // 3 saniye
let lastStatus = null;
let pollHandle = null;
let autoHideTimeout = null;
/* Modal içeriğini günceller ve gösterir/gizler */
function toggleConnectionModal(online, forceShow = false) {
const $modal = $("#internetModal");
const $modalTitle = $("#modal-title");
const $modalBody = $("#modal-body-text");
const $modalHeader = $modal.find('.modal-header');
const $modalFooter = $modal.find('.modal-footer');
// Önceki otomatik kapatma zamanlayıcısını temizle
clearTimeout(autoHideTimeout);
// Modal görünürken bağlantı geri geldiyse ve tekrar online olduysa kapat
if (online && (lastStatus === false || forceShow)) {
// 1. Modal İçeriği: Bağlantı Geri Geldi (Yeşil Başlık, Tamam Butonu Gizli)
$modalHeader.removeClass('danger').addClass('success');
$modalTitle.html('<span class="glyphicon glyphicon-signal"></span> Bağlantı Geri Geldi!');
$modalBody.html('<p>İnternet bağlantınız başarıyla yeniden kuruldu.</p>');
$modalFooter.hide(); // Tamam butonunu gizle
$modal.find('.close').hide(); // Çarpı butonunu gizle
// Modalı göster
$modal.modal('show');
// 3 saniye sonra otomatik kapatma zamanlayıcısını ayarla
autoHideTimeout = setTimeout(() => {
$modal.modal('hide');
// Footer'ı ve çarpıyı tekrar göster (bir sonraki kesinti için hazırla)
$modalFooter.show();
$modal.find('.close').show();
}, AUTO_HIDE_DURATION);
} else if (!online && (lastStatus === true || lastStatus === null || forceShow)) {
// İnternet kesildi
// 2. Modal İçeriği: Bağlantı Kesildi (Kırmızı Başlık, Tamam Butonu Görünür)
$modalHeader.removeClass('success').addClass('danger');
$modalTitle.html('<span class="glyphicon glyphicon-remove-sign"></span> Bağlantı Kesildi!');
$modalBody.html('<p>İnternet bağlantınızda bir sorun var. Bağlantı geri gelene kadar lütfen bekleyin.</p>');
$modalFooter.show(); // Tamam butonunu göster
$modal.find('.close').show(); // Çarpı butonunu göster
// Modalı normal (kapatılabilir) şekilde göster.
$modal.modal('show');
}
}
/* Durum yazısı */
function setResultText(text, color) {
$("#result").html(text).css("color", color);
}
// ... (checkConnection ve pollOnce fonksiyonları önceki kodda olduğu gibi kalır) ...
/* Bağlantıyı image ping yöntemiyle test et */
function checkConnection() {
return new Promise((resolve) => {
const url = PING_URL_BASE + "?_=" + (Math.random() * 1e9);
const img = new Image();
let finished = false;
const to = setTimeout(() => {
if (finished) return;
finished = true;
cleanup();
resolve(false);
}, PING_TIMEOUT_MS);
function cleanup() {
clearTimeout(to);
img.onload = img.onerror = null;
try { img.src = ""; } catch(e) {}
}
img.onload = function() {
if (finished) return;
finished = true;
cleanup();
resolve(true);
};
img.onerror = function() {
if (finished) return;
finished = true;
cleanup();
resolve(false);
};
img.src = url;
});
}
/* Bağlantı durumunu izle */
async function pollOnce() {
try {
const online = await checkConnection();
if (online) {
setResultText("<span class='glyphicon glyphicon-ok'></span> İnternet bağlantısı mevcut.", "green");
if (lastStatus === false) { // Sadece çevrimdışından çevrimiçine geçildiğinde
toggleConnectionModal(true); // Bağlantı geldi modalını göster (3s)
}
lastStatus = true;
} else {
setResultText("<span class='glyphicon glyphicon-remove'></span> İnternet bağlantısı yok!", "red");
if (lastStatus === true || lastStatus === null) { // Sadece durum değiştiğinde
toggleConnectionModal(false); // Bağlantı kesildi modalını göster
}
lastStatus = false;
}
} catch (err) {
setResultText("Hata: bağlantı kontrolü yapılamadı.", "gray");
lastStatus = false;
}
}
// ... (checkConnection ve pollOnce fonksiyonları sonu) ...
/* Başlat */
$(function() {
pollOnce();
pollHandle = setInterval(pollOnce, POLL_INTERVAL_MS);
$("#manualCheck").on("click", () => pollOnce());
// Tarayıcı offline sinyali geldiğinde modalı zorla aç (yedek olarak)
window.addEventListener("offline", () => {
setResultText("<span class='glyphicon glyphicon-remove'></span> Tarayıcı offline sinyali: çevrimdışı.", "red");
// toggleConnectionModal(false, true); // İsteğe bağlı, modalı zorla açabilir
});
// Tarayıcı online sinyali geldiğinde bağlantıyı kontrol et
window.addEventListener("online", () => {
pollOnce();
});
});
