Mam div z linkiem i kliknięciem powinien otworzyć okno dialogowe jQuery powyżej / w samym DIM z Fadein i Out.

Próbowałem go egzaminować z tym obrazem: http://img593.Imageshack.us/ IMG593 / 9852 / Explpled.jpg

HTML

<div id="dialog" title="Basic dialog" style="display: none">Add to cart</div>

jQuery

$('.div').click(function(){
   $('#dialog').fadeToggle();
});

CSS

.div{
    background-color: #fff;
    border: 1px solid #FFECA2;
    width: 123px;
    text-align: center;
    padding: 3px 9px;
    position:relative;
}

#dialog {
    display:block;
    position:absolute;
    display:none;
    left:0; top:0;
    width:100%; height:100%;
    background-color: #FFFEDF;
    border: 1px solid #FFECA2;
    width: 123px;
    text-align: center;
    padding: 3px 9px;
}​

Zgromadziłem skrzypkę tego, co mam do tej pory: http://jsfiddle.net/725me/

Teraz problemem jest: Jeśli mam wiele elementów div , muszę zdefiniować

<div id="dialog"> Add to cart </div> dla każdego div? Czy byłoby możliwe zdefiniowanie go tylko raz?

2
Ntoni 28 lipiec 2012, 18:09

2 odpowiedzi

Najlepsza odpowiedź

ZAKTUALIZOWANA ODPOWIEDŹ:

Jeśli nie chcesz oznaczać znacznika <div class="dialog">Add to cart</div>. (Zamiast tego, że zmieniłem ID dialog do klasy dialog. Identyfikator musi być unikalny dla każdego elementu, który nie będzie działać, jeśli zamierzamy ponownie wykorzystać ten kod dla każdego div) .

Po kliknięciu div sprawdź, czy klasa dialog została już dodana, w przeciwnym razie dołączamy go. Wtedy jesteśmy jak zwykle {{x1}.

Coś takiego:

$('.div').click(function() {
    if ($(".dialog", this).length === 0) {
        $("<div class=\"dialog\">Add to cart</div>").appendTo(this);
    }
    $(".dialog", this).fadeToggle();
})​;

Twój znacznik byłby nieco prostszy:

<div class="div">
    lorem ipsum dolor sit amete
</div>
<div class="div">
    lorem ipsum dolor sit amete
</div>
<div class="div">
    lorem ipsum dolor sit amete
</div>​

Przykład roboczy: http://jsfiddle.net/725me/4/9/a >.

1
Christofer Eliasson 28 lipiec 2012, 14:28