Güncel
Loading...

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.

    <script type="text/javascript">
        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>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>NonObscureJavaScriptPopUp</title>
    <script type="text/javascript">
        function popitup(url) {
            newwindow = window.open(url, 'name', 'height=500,width=450');
            if (window.focus) { newwindow.focus() }
            return false;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <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>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <h4>Hello from popup page!</h4>
          <img width="400" src="./img/jcvdandhisdog.jpg"/>
    </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 :)
Share on Google Plus

About Sema KUDU

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
    Blogger Comment
    Facebook Comment

0 yorum :

Yorum Gönder

Türkiye yenilmez,Millet Eğilmez!