Dynamic Modal Popup content using Bootstrap


You have a website which displays a series of Quotes or Greetings cards. Each of these panel contain unique information to display. Now you need to put this all in a single page, without any redirection to another page. Obviously Bootstrap modal popup is the one will come to your mind. But, you will realize, the JS popups does not update the content without a page refresh. Surely, you can make a work around using clearing JS cache etc, but require further complicated code blocks.

Instead, you can use Bootstrap Modal component – Varying Modal Content

Varying modal content

Have a bunch of buttons that all trigger the same modal with slightly different contents? Use event.relatedTarget and HTML data-* attributes (possibly via jQuery) to vary the contents of the modal depending on which button was clicked.

This is a simple solution for our particular requirement. Surely, we need to feed the dynamic input to data-*attribute. The attribute can be anything, for instance, I call data-itemN where N is the dynamic input we have to produce.

Rest is easy, we normally get a foreach array loop of our content ( quote, greeting message etc) into a DIV Panel , which is inside the Modal Popup content block. Now, for each item, the N will be different for each Modal Block. So you will have N number of Modal Popups sitting behind the curtain, will show up whenever its clicked.

For a working example : see this website : http://pkrosifoundation.org/#news

That website is created with Processwire CMS