Creating a post loop with the native HTML dialog

Loops & Logic
1

There’s finally wide enough support to start using the native HTML dialog element! Here’s a simple post loop, with extra post details in a modal for each post, no external libraries required:

<Loop type=post>
  <button onclick="document.getElementById('postDialog{Field id}').showModal();"><Field title /></button>

  <dialog id="postDialog{Field id}" aria-labelledby="dialog_title{Field id}" aria-describedby="dialog_description{Field id}" >
    <h2 id="dialog_title{Field id}"><Field title /></h2>
    <p id="dialog_description{Field id}">
      <Field excerpt />
    </p>
    <div>
      <button id="close_dialog" onclick="document.getElementById('postDialog{Field id}').close();">Close</button>
    </div>
  </dialog>
</Loop>
5 Likes
2

That’s really cool, I always thought modals were the domain of JS. Neat! :camera_flash:

3

6 posts were split to a new topic: Developing an in-browser preview and editing interface for L&L

4

@julia thanks for sharing. Good stuff!

What are your thoughts on performance best practices if some content for the different posts is loaded in the dialog?

5

I saw a video about this element recently but I did not think there was enough browser support yet. I guess it just depends on how critical browser support is for the use case.

Anything that reduces javascript usage is a huge plus in my view. :slight_smile:

1 Like