Node openen in modal

Ik werk momenteel aan een reiswebsite waar voor de bezoeker een groot aantal tips ter beschikking staan. Er bestaat een viewpagina met alle tips en selectiemogelijkheid via taxonomy.

De klant wou echter ook vanuit content links leggen naar die tips. Een opmerking hierbij was dat de gebruiker dan wel van de content wegnavigeert. Dus stelden we een oplossing voor waarbij de tip geladen wordt in een modal, de oorspronkelijke content lag dan nog visueel op de achtergrond. Het theme van de website was Bootstrap gebaseerd dus we zouden perfect Bootstrap modal kunnen gebruiken.

Aanvankelijk bedacht ik een systeem via Entity Reference waarbij alle nodes in 'teaser view' ingeladen werd in de pagina en bij klikken op een link de gevraagde node zichtbaar werd in een modal window. Het systeem was echter omslachtig voor de content manager.

Terug naar af dus en andere oplossingen gezocht.

jQuery AJAX Load en Bootstrap Modal modules

De combinatie van jQuery AJAX Load en Twitter Bootstrap Modal kan een oplossing bieden. Eens deze ge?nstalleerd kan je via een html link met een bepaalde CSS class (in mijn geval .tip) de bootstrap modal triggeren, met de bestemmingspagina uit de href als content ingesloten. De configuratie vroeg nogal wat trial and error. Mijn configuratie zag er uiteindelijk als onderstaande uit.

Jquery Ajax Load
Twitter Bootstrap Modal

Probleem opgelost, maar niet helemaal. De 'full content' weergave tonen in de modal was niet echt teasen om naar de 'full content pagina' te gaan. Ik zag echter niet direct een oplossing om een 'teaser weergave' te laden. Ik was immers bij de installatie van jQuery AJAX Load vergeten de (sub)module jQuery AJAX Load Node te activeren. Deze biedt een nieuwe weergave instelling 'jQuery AJAX Load' onder 'Weergave beheren' van het content type, waarmee je je eigen weergave kan gaan configuren.

JQuery Ajax Upload Module overview