Kilka okienek modalnych na stronie

HowTo  Założony przez  Nexus..

Witam.
Robię sobie stronę do szkoły, i potrzebuję czegoś takiego jak kilka okienek modalnych na jednej stronie, lecz każde z inną treścią.
Klikając w pierwszy obrazek, mam okienko modalne z pierwszą treścią, chciałbym by klikając w drugi obrazek, ukazało się okienko z drugą treścią. Nie to samo, co w pierwszym.
Przykładowo:
Mam obrazek z płytą główną, klikając mam okienko z jej opisem. Następnie klikając w obrazek procesora, ukaże się opis procesora.
Oto kawałek mojego chaotycznego kodu:
<div class="col-xs-6 col-md-3">
    <a href="#" id="my-button" class="thumbnail" title="Płyta główna">
      <img src="img/mobo.png" alt="...">
    </a>
  </div>
  <div class="col-xs-6 col-md-3">
    <a href="#" id="my-button" class="thumbnail" title="Procesor">
      <img src="img/procesor.png" alt="...">
    </a>
  </div>

<div id="element_to_pop_up">
    <div id="test">
        <div class="modalbg">
            <div class="modaltitle">Tytuł okna</div><div class="minihr"></div>
            <div class="modalbody">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque repudiandae voluptates quasi ad accusantium quam, beatae consectetur enim, praesentium vero debitis libero iure quibusdam asperiores incidunt architecto impedit maxime a.</div>
        </div>
    </div>
    </div>

<script type="text/javascript">
// Semicolon (;) to ensure closing of earlier scripting
    // Encapsulation
    // $ is assigned to jQuery
    ;(function($) {

         // DOM Ready
        $(function() {

            // Binding a click event
            // From jQuery v.1.7.0 use .on() instead of .bind()
            $('#my-button').bind('click', function(e) {

                // Prevents the default action to be triggered.
                e.preventDefault();

                // Triggering bPopup when click event is fired
                $('#element_to_pop_up').bPopup();
            });

        });

    })(jQuery);

</script>

Proszę o pomoc, już jutro muszę oddać stronę. :/
Pozdrawiam!
No jeżeli użyjesz tych samych identyfikatorów w kilku pop-upach, to wiadome, że otworzy Ci to samo. Pozmieniaj do każdego #id. To samo w przypadku kodu JS.
Prośby na PW dotyczące wsparcia z problemami będą ignorowane. Pomoc poza forum - odpłatna; kontakt: snakemybboard@gmail.com.
Dałem radę, sugerując się Twoją wypowiedzią. Dziękuję. :)



Użytkownicy przeglądający ten wątek:

1 gości