19.10.2014, 15:34
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:
Proszę o pomoc, już jutro muszę oddać stronę. :/
Pozdrawiam!
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:
Kod:
<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!
