How to do a dynamic Modal Pop-up with jekyll & javascript/jquery

Question

I want to know if the following is possible with jekyll:

A webpage there is list where you can click each item. > Sample image
Each item is listed through a loop using the data inside the data.yml file from _data folder (jekyll)
When a item is clicked, a pop-up modal will appear and the content should be based on the clicked item. > Sample Image
These contents are also stored in the data.yml file

If this is possible, how do I extract the data in the data.yml when a user clicked an item?

Yes, it is. You'll need to use for loops, like: {% for data in site.data %}... html markup... {% endfor %}. You should provide some code blocks here with the code you already have so people can help you by editing your code. We usually don't provide you with new code, we help you to modify your own code according to your needs. For a better explanation, please check this out. — Virtua Creative
shouldn't be a problem to do with jekyll. Do you know how to do this without jekyll? if not, then that is your real question. Once you know how to do it, plugging in the data file should be easy. Maybe check bootstrap for the way they do it. — Ron

AntK AntK · Accepted Answer · 2016-02-01T09:14:36

To do what you are trying to acheive you will need to use a for loop. let's call your data file members.yml and place it in _data directory.

Let's assume you will have there content similar to this

- name: John
  music: Rock

- name: Parker 
  music: Hip-Hop

- name: Lissie
  music: Jazz

now we can reference this in our html

<ul>
  {% for member in site.data.members %}
    <li>
      <a href="#" class="show-message">
        {{ member.name }}, click me to see something
      </a>
      <div class="modal hide"> My favorite music is {{ member.music}}</div>
    </li>
  {% endfor %}
</ul>

this will generate a list. class hide will hide our modal by default, you can style the modal the way you like. Here is some jquery that will remove the hide class when you click the link and release the modal.

$(document).ready(function () {
      $("a.show-message").on("click", function () {
          console.log("clicked");
          $(this).next().removeClass("hide");
      });
});

How to do a dynamic Modal Pop-up with jekyll & javascript/jquery

1 Answers