jQuery popbox/popunder/pop... Iframe

**0xFF** · 2013-01-30, 17:18

Kb 2 órája próbálgatom a külömböző popbox megoldásokat de mind csődöt mondanak, vagy több 10kb.
Ami nekem kellene az egy egyszerűbb plugin ami megnyit egy popupban egy iframe-et és lehet állítani a dimenziókat, közben az sem gond ha kap az egész oldal egy átlátszó fekete/szürke layert.

Tehát van egy link <a href="http://oldal.hu/iframe.htm">Ize</a> és ezt szeretném megjeleníteni egy popbox ban a lehető legegyszerűbb mondón.
jQuery van már tehát valami plugin kellene nekem, csak ne legyen hozzá még 10-20kb Css meg 67 db icon.

Köszönöm.

**Geri** · 2013-01-30, 17:43

ColorBox - a jQuery lightbox talan ez?

**Emphus** · 2013-01-30, 21:23

Nem az enyém, egy konkurencia fejlesztette (tudomásom szerint, de lehet, hogy nem jól tudom), de engedte, hogy használjam (kedves

):
http://www.lanawin.hu/forum_ic/jquery-popup.js

Használat:
$.shadow('shadow', 'popup-title', 'http://www.example.com');

Az URL-ről behúzza a tartalmat, és betolja a képernyő közepére. Az url-en elérhető filet kell CSS-el szépen méretezned, és a benne lévő tartalmat úgyszintén.
Az ablak mellé, a szürke részre kattintva lehet eltüntetni.

Amúgy meg készíteni is egyszerű: feldarabolod függőleges három felé a monitort, a középsőt vízszintesen három felé szintén. A középsőn kívül mindent kitöltesz egy .png-vel mondjuk, ami alapból fekete, de valamennyire átlátszó, a középső részbe meg tetszés szerint pakolsz tartalmat.

Ha jól értem a kérdést...

**Geri** · 2013-01-30, 21:40

Emphus eredeti hozzászólása

Amúgy meg készíteni is egyszerű: feldarabolod függőleges három felé a monitort, a középsőt vízszintesen három felé szintén. A középsőn kívül mindent kitöltesz egy .png-vel mondjuk, ami alapból fekete, de valamennyire átlátszó, a középső részbe meg tetszés szerint pakolsz tartalmat.

Ennel egyszerubb 2 absolute positioned div. Egy az arnyekolt hatternek, egy pedig a tartalomnak kozepre igazitva.

**Emphus** · 2013-01-30, 22:45

Hehe, valóban. Csak ez volt a fejemben, mert ami nekem legutóbb kellett az egy magyarázó ablak + egy olyan rész, ami nincs sötétítve, amiről éppen magyaráz (highlight?), és oda ár nem volt elég két div. De igazad van, valóban úgy sokkal egyszerűbb a fenti probléma.

**0xFF** · 2013-01-30, 22:57

Mind a kettő jó de egyik sem az igazi.

@Emphus: A plugin jó, csak AJAX ot használ és nem Iframe-et, valamint JS ben van css rész ez mondjuk nem vészes.

@Geri: Ez egy kicsit többet tud mint ami nekem kell, és ennél fogva elég nagy is 10kb ot olvastam + a css.

Ami nekem kell ahoz az Emphus által írt megoldás áll a legközelebb, szerintem azt fogom módosítani.

**holinorby** · 2013-02-22, 16:43

Szisztok, remélem jó topicba írok.

Szeretnék beállítani egy popup hírlevél feliratkozást, ami a képernyő bal oldalán gördül le, viszont nekem az kelle, hogy a jobb oldalon gördüljön le.
Ezt a kódrészlet, próbáltam a számokat állítani, de csak függőleges írányban csúszott el.

PHP kód:

 <script type='text/javascript' language='Javascript'>
<!-- A popup lecsúszásának sebessége -->
    var div = 5;
    
    var sliderEnabled = true;
    function scrFol()
    {
        var ad = document.getElementById( 'slider' );
        var dPos = ( document.all ) ? document.body.scrollTop : window.pageYOffset;

        if ( ( dPos == 0 ) && ( document.all ) )
            dPos = document.documentElement.scrollTop;

        dPos += 50;
        var cPos = parseInt( ad.style.top );
        if ( cPos == 4 )
            cPos = dPos-1000;

        var posDif = dPos-cPos;

        if ( ( ad.style.display == 'none' ) && ( sliderEnabled ) )
            ad.style.display = 'block';

        if ( posDif > 0 )
            ad.style.top = (cPos+Math.ceil(posDif/div))+'px';
        else if ( posDif < 0 )
            ad.style.top = (cPos+Math.floor(posDif/div))+'px';

        if ( sliderEnabled )
            setTimeout( 'scrFol()', 20 );
    }
    function closeFollowSlider()
    {
        sliderEnabled = false;
        document.getElementById( 'slider' ).style.display = 'none';
    }

<!-- A popup lecsúszásának késleltetése -->
setTimeout( 'scrFol()', 3000 );
</script>

A segítséget előre is köszönöm!

**holinorby** · 2013-02-22, 18:03

butavagyok, megvan.... és még egy kicsi, hogy meglegyen a 25 karakter

**Emphus** · 2013-02-22, 18:09

Szerintem ezt inkább CSS-ben kéne beállítani, mint a JS scriptben. De ha nagyon szeretnéd, megpróbálhatsz egy olyat, hogy beszúrsz egy sort, valahogy így:

PHP kód:

 <script type='text/javascript' language='Javascript'>
<!-- A popup lecsúszásának sebessége -->
    var div = 5;
    
    var sliderEnabled = true;
    function scrFol()
    {
        var ad = document.getElementById( 'slider' );
        var dPos = ( document.all ) ? document.body.scrollTop : window.pageYOffset;

        if ( ( dPos == 0 ) && ( document.all ) )
            dPos = document.documentElement.scrollTop;

        dPos += 50;
        var cPos = parseInt( ad.style.top );
        if ( cPos == 4 )
            cPos = dPos-1000;

        var posDif = dPos-cPos;

        if ( ( ad.style.display == 'none' ) && ( sliderEnabled ) )
            ad.style.display = 'block';

        if ( posDif > 0 )
            ad.style.top = (cPos+Math.ceil(posDif/div))+'px';
        else if ( posDif < 0 )
            ad.style.top = (cPos+Math.floor(posDif/div))+'px';
                
                ad.style.right = "0px";

        if ( sliderEnabled )
            setTimeout( 'scrFol()', 20 );
    }
    function closeFollowSlider()
    {
        sliderEnabled = false;
        document.getElementById( 'slider' ).style.display = 'none';
    }

<!-- A popup lecsúszásának késleltetése -->
setTimeout( 'scrFol()', 3000 );
</script>

**holinorby** · 2013-02-22, 21:12

Emphus köszi! Közben megtaláltam a megoldást. Ez a Webgalamb popup feliratkozója. Nagyon koncentráltam a bemásolt sorokra és elkerülte a figyelmem, hogy alatta van a div és annak kialakítása. Most már működik szuperül.