0

I am using a pretty simple css overlay code to bring up a popup. It works fine by itself. But when I use it within Expressionengine tags to bring up the content of entries dynamically it shows the first entry only every time, instead of the content of the entry you click on.

How can I get the overlay to appear with the correct content each time you click on a title?

I am using the following code:

{exp:channel:entries channel="topic-content" category="5" limit="10"}
<a href="#openModal">
{title}
</a>
<div id="openModal" class="modalDialog">
<div>
        <a href="#close" title="Close" class="close">X</a>
        <i>{overview}</i>
</div>
</div>
<br />
{/exp:channel:entries}

The overlay popup comes up fine but only shows the results (the 'overview' field) from the first entry, no matter which entry ('title') you click on.

Below is the code for the overlay itself:

<style>
.modalDialog {
overflow-y: scroll;
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: -90px;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.5);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}

.modalDialog:target {
opacity:1;
pointer-events: auto;
}

.modalDialog > div {
width: 600px;
height: auto;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #f4fbec;
color: black;
}
</style>

1 Answer 1

1

Your browser doesn't run past the first instance of replicated element id's. Every anchor you have on that page:

<a href="#openModal">
    {title}
</a>

targets the same id, and your browser only knows to point the anchor at the first instance. You need to create unique id's for each targeting anchor and each modal element. Add a dynamic and unique variable to your loop to make each outputted instance unique; can't go wrong with your entry_id!

{exp:channel:entries
    channel="topic-content"
    category="5"
    limit="10"}

    <a href="#openModal-{entry_id}">
        {title}
    </a>
    <div id="openModal-{entry_id}" class="modalDialog">
        <div>
            <a href="#close" title="Close" class="close">X</a>
            <i>{overview}</i>
        </div>
    </div>
    <br />

{/exp:channel:entries}

I don't know how the close anchor targets the modal, but it doesn't seem to need to know the id of the modal itself, so that should be fine on its own.

2
  • Fantastic. I was hoping there would be a simple and effective solution to this. Thanks!
    – Geoff
    Apr 26, 2016 at 17:05
  • (I'm not sure how to mark this as solved - I'm not allowed to use the up arrow.)
    – Geoff
    Apr 26, 2016 at 17:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.