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

jQuery Modal Window

Af Rune Grønkjær | Udgivet 6. juli 2010 | Read this in english English version
Jesper Holm Damgaard og undertegnede har udviklet et solidt jQuery plugin til at ligge indhold i et modal vindue. Ideen er at man skal kunne selecte et hvilket som helst element i DOM’en og lade det blive vist på et stykke madpapir.

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.

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.

Standard settings

Der er en del indstillingsmuligheder til Modal Window plugin’et. Se dem alle på denne side:
Modal Window indstillinger

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.

Javascript

jQuery(document).ready(function () {
  jQuery('#ClickMeStandard').click(function () {
      jQuery('#ShowMeStandard').Co3ModalWindowOpen();
      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 = {
      opacity: 0.9,
      background: '#fff',
      minDistanceToViewport: 50,
      animateTime: 1000
  };
  jQuery('#ClickMeLooks').click(function () {
    jQuery('#ShowMeStandard').Co3ModalWindowOpen(settingsLooks);
    return false;
  });
  jQuery('#ClickMeLooks_AdvancedContent').click(function () {
    jQuery('#ShowMeAdvanced').Co3ModalWindowOpen(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 () { alert("onClose"); },
    onClosed: function () { alert("onClosed"); }
  };
  jQuery('#ClickMeEvents').click(function () {
    jQuery('#ShowMeStandard').Co3ModalWindowOpen(settingsEvents);
    return false;
  });
  settingsEvents = {
    onClosed: function (content) {
      jQuery(content).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').Co3ModalWindowOpen(settingsEvents);
    return false;
  });
});
Eksempel 7: Alertbokse bliver lavet for hver event
Eksempel 8: Formular som bliver nulstillet når man lukker den.

Eksempel på en anden måde at bruge formularen på.

Dette eksempel bruger samme formular som tidligere. Denne gang lukkes der dog for vores textarea. Når man klikker på det får man lov til at rette den i et nyt modal vindue.

Bemærk at jeg selv skal kode de ekstra ting, som sker i eksemplet. Det eneste pluginet leverer er de åben og luk events der gør at jeg kan udføre opgaven.

Javascript

jQuery(document).ready(function () {
  var settingsForm2 = { 
          closeOnBlockClick: false,
          opacity: 0.01,
          animateTime: 250
  };
  var settingsForm1 = {
    onOpen: function (content) {
      var skrivTekst = jQuery("<a href='#' id='SkrivTekst' style='cursor:pointer;display:block;'>Klik her for at skrive en tekst i et ny modal vindue</a>").click(function () { jQuery("#showMe_Form2").Co3ModalWindowOpen(settingsForm2); return false; });
      jQuery(content).find("textarea").attr("disabled", "disabled").after(skrivTekst);
    },
    onClosed: function () {
      jQuery(content).find("textarea").attr("disabled", "");
      jQuery(content).find("#SkrivTekst").remove();
    }
  };

  jQuery('#ClickMeForm_Form').click(function () {
    jQuery('#showMe_Form').Co3ModalWindowOpen(settingsForm1);
    return false;
  });
  jQuery(content).find("#SubmitBoth").click(function () {
    jQuery("#showMe_Form textarea").val(jQuery(this).closest("div").find("textarea").val());
    jQuery(this).Co3ModalWindowClose();
    jQuery('#showMe_Form').Co3ModalWindowClose();

  });
  jQuery(content).find("#SubmitOne").click(function () {
    jQuery("#showMe_Form textarea").val(jQuery(this).closest("div").find("textarea").val());
    jQuery(this).Co3ModalWindowClose();
  });
});
Eksempel 9: Åben formularen

Prøv selv

Her kan du selv udfylde de indstillinger du ønsker og prøve dem på en af de tre indholdseksempler.

Javascript

jQuery(document).ready(function () {
  jQuery("#ClickMeTrySelf_Image, #ClickMeTrySelf_Text, #ClickMeTrySelf_Form").click(function () {
    var settingTbl = jQuery("#ClickMeTrySelf_Settings"),
        txtFixedTop = settingTbl.find("#txtFixedTop"),
        txtFixedLeft = settingTbl.find("#txtFixedLeft");
    var settingsTrySelf = {
      onOpen: function (content) { runSomeCode("#txtOnOpen"); },
      onOpened: function (content) { runSomeCode("#txtOnOpened"); },
      onClose: function (content) { runSomeCode("#txtOnClose"); },
      onClosed: function (content) { runSomeCode("#txtOnClosed"); },
      opacity: parseFloat(settingTbl.find("#txtOpacity").val()),
      background: settingTbl.find("#txtBackground").val(),
      minDistanceToViewport: parseInt(settingTbl.find("#txtMinDistanceToViewport").val()),
      zIndex: parseInt(settingTbl.find("#txtZIndex").val()),
      animateTime: parseInt(settingTbl.find("#txtAnimateTime").val()),
      closeOnBlockClick: settingTbl.find("input[name='rdbCloseOnBlockClick']:checked").val() === "1" ? true : false,
      fixedTop: txtFixedTop.val() === "null" ? null : parseInt(txtFixedTop.val()),
      fixedLeft: txtFixedLeft.val() === "null" ? null : parseInt(txtFixedLeft.val())
    };
    switch (this.id) {
      case "ClickMeTrySelf_Image":
        jQuery('#ShowMeStandard').Co3ModalWindowOpen(settingsTrySelf);
        break;
      case "ClickMeTrySelf_Text":
        jQuery('#ShowMeAdvanced').Co3ModalWindowOpen(settingsTrySelf);
        break;
      case "ClickMeTrySelf_Form":
        jQuery('#showMe_Form').Co3ModalWindowOpen(settingsTrySelf);
        break;
    }
    return false;
  });
});

function runSomeCode(eleSelector) {
  try {
    eval("var runCode = " + jQuery(eleSelector).val());
    if (runCode) {
      runCode(content);
    }
  } catch (ex) {
    alert("Du har lavet en javascriptfejl:\n" + ex.message);
  }
}
onOpen (function):
onOpened (function):
onClose (function):
onClosed (function):
opacity (float):
background (css background value):
minDistanceToViewport (integer):
zIndex (integer):
animateTime (integer):
closeOnBlockClick (Boolean):
fixedTop (integer):
fixedLeft (integer):
Eksempel 10: Klik her for at åbne et billede
Eksempel 11: Klik her for at åbne en masse tekst og sager
Eksempel 12: 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