Javascript Kaybolmayan Popup Pencere

Merhaba,
Bu yazımızda javascript ile popup pencere oluşturacağız, aslıda çok basit bir işlem web geliştiriciler için fakat popup'ın bir diğer linke tıklandığında kaybolmamasını, tekrar tekrar aynı linke basıldığında tekrarlanmamasını istiyorsanız durum farklı :)

İşte bu yazıda tam da bunu anlatıyorum.Yeni bir ASP.Net WebSitesi projesi oluşturarak işe başlayalım.
Ne dinlemeli ?
Senaryomuza göre Default.aspx ve PopUpPage.aspx sayfalarını oluşturalım.

PopupPage sayfasında resim göstermek için img klasörümüzü ve resmimizi ekleyelim.

Şimdi bu işlev için temel olacak javascript fonksiyonunu Default.aspx sayfasının head kısmına ekleyelim.Bu fonksiyonda window.open ile bir popup açılıyor fakat devam eden if şartı ile zaten popup varsa tekrarlanmıyor ve o popup'a odaklanılıyor.

function popitup(url) {

newwindow = window.open(url, 'name', 'height=500,width=450');

if (window.focus) { newwindow.focus() }

return false;

}

</script>

Ve body tagında bir link oluşturalım ve bu javascript metodumuzu çağıralım.

<a href="PopUpPage.aspx" onclick="return popitup('PopUpPage.aspx')">Link to popup</a>

Default.aspx sayfasının son hali aşağıdaki gibi olacaktır.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<title>NonObscureJavaScriptPopUp</title>

function popitup(url) {

newwindow = window.open(url, 'name', 'height=500,width=450');

if (window.focus) { newwindow.focus() }

return false;

}

</script>

</head>

<body>

<div>

<a href="PopUpPage.aspx" onclick="return popitup('PopUpPage.aspx')">Link to popup</a>

</div>

</form>

</body>

</html>

Popup'da açılacak sayfamızı kodlayalım.Basit bir şekilde bir başlık ve resim ekleyelim.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PopUpPage.aspx.cs" Inherits="PopUpPage" %>

<!DOCTYPE html>

</head>

<body>

<div>

<h4>Hello from popup page!</h4>

</div>

</form>

</body>

</html>

Projemizi sorun olmadan çalıştıralım ve sonucu görelim.

Aynı linke bir çok defa tıklayarak ya da iki ayrı link oluşturarak dediğim özelliklerin gerçekleştiğini görebilirsiniz.Projeyi githubımda bulabilirsiniz.

Bugün denemeye çalışacağım 10K koşusu için bana şans dileyin :)

Sağlıkla huzurla,sporla kalın :)

Author Description