Rune Grønkjærs Blog
Abonnér på mit feed
Forsiden

jQuery Modal Window plugin

Af Rune Grønkjær | Udgivet 22. august 2010 | Read this in english English version
Hermed genproduktionen af Modal Window plugin’et. Denne gang i en udgave, skrevet udelukkende af mig selv.

jQuery Modal Window er opbygget af to dele. jQuery plugin delen og så en controller klasse, hvis API benyttes til at styre jQuery Modal Window og dets indhold.

Der skal meget lidt kode til at sætte benytte plugin’et på et site, men man har også en masse muligheder for selv at influere udseende og events.

Kompatibilitet

jQuery Modal Window plugin’et er testet i IE6 og alle nyere browsere og benytter jQuery 1.4.2.

Dokumentation

Der er en del indstillingsmuligheder til Modal Window plugin’et. Se dem og læs om API’et på denne side:
jQuery Modal Window dokumentation

Standardopsætningen

I sin mest basale form har Modal Window et standard udseende med alle default indstillingerne. Det er ikke nødvendigt at sende egne indstillinger med, medmindre man ønsker at ændre noget.

Eksempler på standardopsætningen

Det første eksempel viser hvordan man helt enkelt kan vise et billede ovenpå et stykke madpapir.
Den eneste måde at lukke dette Modal Window på er i dette eksempel ved at klikke på baggrunden.
Det andet eksempel viser tilsvarende hvordan man åbner et vindue med tekst og andre ting i. Hvad man åbner er helt op til fantasien.
Det tredje eksempel åbner en formular, som så kan udfyldes.

Javascript

jQuery(document).ready(function () {
  jQuery('#ClickMeStandard').click(function () {
    jQuery('#ShowMeStandard').openModalWindow();
    return false;
  });
  jQuery('#ClickMeStandard_AdvancedContent').click(function () {
    jQuery('#ShowMeAdvanced').openModalWindow();
    return false;
  });
  jQuery('#ClickMeStandard_Form').click(function () {
    jQuery('#showMe_Form').openModalWindow();
    return false;
  });
  jQuery('.openNewWindowButton').live("click", function () {
    jQuery('#ClickMeStandard').click();
    return false;
  });
  jQuery('#ShowMeAdvanced .closeModalWindow').live("click", function () {
    jQuery(this).closeModalWindow();
    return false;
  });
  jQuery('#Close, #Submit').live("click", function () {
    jQuery(this).closeModalWindow();
    return false;
  });
});
Eksempel 1: Klik her for at åbne et standard Modal Window med et billede i
Eksempel 2: Klik her for at åbne et standard Modal Window med en masse tekst og sager
Eksempel 3: Klik her for at åbne et standard Modal Window med en formular

Eksempler på ændring af udseendet

I disse eksempler ændres der på madpapirets farve og opacity. Vi bestemmer også at animationen skal tage 1 sekund i stedet for det halve sekund i standardversionen.
Slutteligt sættes marginen til browserens kant til 50 pixels, så vi altid har en vis afstand.

Javascript

jQuery(document).ready(function () {
  var settingsLooks = {
    backgroundOpacity: 0.9,
    backgroundBackground: '#fff',
    minDistanceToBrowserEdge: 50,
    animateTime: 1000
  };
  jQuery('#ClickMeLooks').click(function () {
    jQuery('#ShowMeStandard').openModalWindow(settingsLooks);
    return false;
  });
  jQuery('#ClickMeLooks_AdvancedContent').click(function () {
    jQuery('#ShowMeAdvanced').openModalWindow(settingsLooks);
    return false;
  });
  jQuery('#ClickMeLooks_Form').click(function () {
    jQuery('#showMe_Form').openModalWindow(settingsLooks);
    return false;
  });
});
Eksempel 4: Klik her for at åbne et billede
Eksempel 5: Klik her for at åbne en masse tekst og sager
Eksempel 6: Klik her for at åbne en formular

Eksempler på brugen af de fire events

I disse eksempler udnytter vi de fire åben og lukevents.

Javascript

jQuery(document).ready(function () {
  var settingsEvents = {
    onOpen: function () { alert("onOpen"); },
    onOpened: function () { alert("onOpened"); },
    onClose: function (mwc) { alert("onClose"); mwc.deconstruct(); },
    onClosed: function () { alert("onClosed"); }
  };
  jQuery('#ClickMeEvents').click(function () {
    jQuery('#ShowMeStandard').openModalWindow(settingsEvents);
    return false;
  });
  var settingsEvents2 = {
    onClosed: function (mwc) {
      jQuery(mwc.modalContent).find("input:not([type=button]), textarea, select").each(function () {
        this.value = this.defaultValue;
        jQuery(this).removeAttr('checked');
      });
    }
  };
  jQuery('#ClickMeEvents_Form').click(function () {
    jQuery('#showMe_Form').openModalWindow(settingsEvents2);
    return false;
  });
});
Eksempel 7: Alertbokse bliver lavet for hver event
Eksempel 8: Formular som bliver nulstillet når man lukker den.

Prøv selv

Her kan du selv prøve at udfylde indstillingerne og derefter køre åbne et jQuery Modal Window med de nye indstillinger. Indstillinger bliver dynamisk hentet fra jQuery Modal Window’s standard indstillinger.

Gør følgende

  1. Ret i de indstillinger du ønsker rettet
  2. Vælg et af eksemplerne under indstillingerne
Eksempel 9: Klik her for at åbne et billede
Eksempel 10: Klik her for at åbne en masse tekst og sager
Eksempel 11: Klik her for at åbne en formular

Vil du bruge det?

Du kan frit benytte mit plugin. Hvis du er venlig vil du meget gerne linke tilbage til min side, hvor du benytter det. Download min pakkede version her:
English version