Modal Window po załadowaniu strony


(Kernelus) #1

Witam,

Ściągnąłem z tej strony skrypt na okienka modal window lecz wyskakuje ono dopiero po kliknięciu w przycisk, niestety nie znam się na tyle na javascripcie (prawie w ogóle) żeby to przerobić aby pokazywało się po załadowaniu strony.

Skrypt ściągnąłem stąd: http://zurb.com/playground/reveal-modal-plugin

Z tego co wiem to za pojawienie się odpowiada ta część kodu:

modal.bind('reveal:open', function () {

			  modalBG.unbind('click.modalEvent');

				$('.' + options.dismissmodalclass).unbind('click.modalEvent');

				if(!locked) {

					lockModal();

					if(options.animation == "fadeAndPop") {

						modal.css({'top': $(document).scrollTop()-topOffset, 'opacity' : 0, 'visibility' : 'visible'});

						modalBG.fadeIn(options.animationspeed/2);

						modal.delay(options.animationspeed/2).animate({

							"top": $(document).scrollTop()+topMeasure + 'px',

							"opacity" : 1

						}, options.animationspeed,unlockModal());					

					}


				}

				modal.unbind('reveal:open');

			});

Lecz nie wiem jak to przerobić. :expressionless:


(Konrad Kosowski) #2

Jeśli masz to podpięte tak jak trzeba, to w kodzie będziesz miał coś takiego:

div id="myModal" class="reveal-modal"//Tutaj jakiś kod html, który ma się w oknie pojawićdiva href="#" data-reveal-id="myModal" id="id_przycisku"Tutaj ten przycisk, o którym wspominasza[/code]



Jeśli chcesz, żeby okienko o id myModal pojawiało się po załadowaniu strony dodaj taki kod do heada:




[code=php]$(function(){"#id_przycisku").click();



ps. nie mam okazji sprawdzić, w każdym razie gdyby jednak nie działało - chodzi o to, żeby wywołać event click na elemencie, który posiada odpowiednie dla modala data-reveal-id

(Kernelus) #3

Działa, dodałem Twój kod i w stylu przycisku dałem na display:none żeby nie było go widać. A nie da się zrobić tak aby w ogóle odbyło się to bez przycisku? :slight_smile:


(Konrad Kosowski) #4

Jasne, jeśli nie potrzebujesz przycisku można to zrobić tak:

$(function(){ '#myModal').reveal();

(Kernelus) #5

Dzięki o to chodziło, teraz działa idealnie. :slight_smile: Muszę się w końcu zabrać porządnie za naukę javascriptu. :slight_smile: