Jak zrobć POP-UP w html/php i proste pytanko html?


(Konodup) #1

Witam!

Od razu mówię, że szukam i szukam...

Chodzi o to, że potrzebuję, aby na mojej stronie pojawiło się coś podobnego jak tutaj:

www.zameklubliniec.pl

Chodzi mi właśnie o ten wyskakujący pop-up. Na swojej stronie

www.meblemdm.pl

używam już js (przewijane obrazki mebli) i po władowanu pop-up w js, te trzy obrazki są w kolejności pod spodem... (nie wiem czy rozumiecie)...

  1. Czy jest właśnie jakiś sposób, aby uzyskać ten pop-up w wersji html albo php (aby nie używać js)?

  2. Drugie pytanie przy okazji. Jak usunąć tą czarną krechę pod zdjęciami z js (index.html)


(adpawl) #2
  1. nie wiem jak ty chcesz popupa zrobić w php.

popup, to przecież głównie css+js

Jest cała masa gotowych kodów i przykładów, skoro korzystasz już z jquery to i do popupa możesz go wykorzystać.

Generalnie js nie jest tutaj problemem ....chyba że źle użyty

  1. kreskę masz w http://www.meblemdm.pl/images/slider_bg.jpg

(Konodup) #3

Ok. Dowiedzialem się, że zaistniał konflikt jQuery. Pzemieniłem kod na:

Wysyłam część kodu źródłowego i efekt.

A efekt... Tutaj (za duże zdjęcie) EDIT Jeszcze spróbowałem innego skryptu ze strony:

robertmatuszewski.pl/blog/programowanie/okienko-popup-oparte-o-css-i-jquery/

i skrypt jest ładniejszy, lecz i tak wyskakują trzy zdjęcia jedno pod drugim. Kod drugiego skryptu:

mdm NOWOCZESNE MEBLE









'); //Add the fade layer to bottom of the body tag.

    $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies 


    return false;

});


//Close Popups and Fade Layer

$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...

    $('#fade , .popup_block').fadeOut(function() {

        $('#fade, a.close').remove(); //fade them both out

    });

    return false;

});

});

Tytuł okienka

Tekst w okienku
[/code]


(adpawl) #4

zostaw tamto swoje jquery 1.3.2

podepnij style popupa

...a tam gdzie masz ten skrypcik slidera zmień na:

$(document).ready(function(){

    $('#slideshow').cycle({

        fx: 'fade',

        speed: 'slow',

        timeout: 3500,

        pager: '#slider_nav',

        pagerAnchorBuilder: function(idx, slide) {

            // return sel string for existing anchor

            return '#slider_nav li:eq(' + (idx) + ') a';

        }

    });


$('a.poplight[href^=#]').click(function() {

    var popID = $(this).attr('rel'); //Get Popup Name

    var popURL = $(this).attr('href'); //Get Popup href to define size


    //Pull Query & Variables from href URL

    var query= popURL.split('?');

    var dim= query[1].split('&');

    var popWidth = dim[0].split('=')[1]; //Gets the first query string value


    //Fade in the Popup and add close button

    $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('');


    //Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css

    var popMargTop = ($('#' + popID).height() + 80) / 2;

    var popMargLeft = ($('#' + popID).width() + 80) / 2;


    //Apply Margin to Popup

    $('#' + popID).css({

        'margin-top' : -popMargTop,

        'margin-left' : -popMargLeft

    });


    //Fade in Background

    $('body').append('

'); //Add the fade layer to bottom of the body tag. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies return false; }); //Close Popups and Fade Layer $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer... $('#fade , .popup_block').fadeOut(function() { $('#fade, a.close').remove(); //fade them both out }); return false; }); });[/code] potem wrzuć gdzieś w kodzie strony testowego popupa
[code]słowo link

Tytuł okienka

Tekst w okienku


(Konodup) #5

Działa! MASZ PIWO :slight_smile: Dzieki ogromne!