Altijd al een pop-up form willen hebben? Ik heb aardig lopen zoeken naar een voorbeeld. Eindelijk heb ik het dan gevonden. We gaan een link plakken achter een afbeelding waarmee we een audiobestand laten afspelen in een pop-up form.
We plaatsen het "geluidsfragment.gif" of een ander bestand dat je wil gebruiken.
Ga naar "Inhoud van de site"
Creëer in de bibliotheek Pagina’s of Sitepagina’s je nieuwe webpagina en open deze nieuwe pagina. (soms is verversen van de bibliotheek nodig om de pagina zichtbaar te maken in de lijst)
Klik op "Bewerken".
Plaats nu de afbeelding die je wil gebruiken voor je pop-up form op je webpagina.
Positioneer je muis naar de afbeelding en ga nu naar “Bron bewerken in het lint (Ribbon) onder de tab “Tekst opmaken”.
Pas de complete code voor je afbeelding aan naar;
<div style="text-align: center;">
<a href="#" id="CB_Audio">
<img src="/PublishingImages/Geluidsfragment.gif" alt=""/>
</a>
</div>
Let erop dat je de href, een ID meegeeft (CB_Audio in het voorbeeld).
Sluit nu de Code bewerken pagina af.
Voeg nu een Webonderdeel toe vanuit het lint (Ribbon) onder invoegen door achtereenvolgens onder “Categorieën”; “Media en inhoud”, vervolgens onder “Onderdelen” het webonderdeel “Scripteditor” te klikken en af te sluiten met “Toevoegen”.
Hierna ga we het toegevoegde webonderdeel bewerken.
De eigenschappen rechts van het webonderdeel gebruiken we niet, maar we gaat in het webonderdeel het “Fragment bewerken”. Klik hierop.
Plak hier de onderstaande code.
<script >
function openDialog(pageUrl) {
var options = {
url: "/Audio/CB17.mp3",
title: 'Audiofragment',
allowMaximize: false,
showClose: true,
width: 500,
height: 400
};
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
}
$("#CB_Audio").click(function(e) {
openDialog(e.target.href);
//$(".menu-item").removeAttr('href');
return false;
});
</script >
De regel url geeft de link naar het audiobestand weer.
Pas hier ook het ID aan (in het voorbeeld CB_Audio), mocht je een ander hebben gebruikt.
Sla alle open scherm op en het is tijd om te testen.
Hieronder het resultaat.
