<p>Ajax is probably the easiest way when using something like <a href="http://fancyapps.com/fancybox/3/docs/#iframe" rel="nofollow noreferrer">Fancybox</a>:</p>
<pre><code>&lt;a data-fancybox data-type=&quot;ajax&quot; data-src=&quot;yoursite.com/houses/house-slug&quot; href=&quot;javascript:;&quot;&gt;
    House page
&lt;/a&gt;
</code></pre>
<p>If your house page has content you want to hide when viewed in the modal you can detect whether or not Ajax was used to request the page:</p>
<pre><code>{% if not craft.app.request.isAjax %}
    Your header code
{% endif }
</code></pre>
<p>You could also just include the house content on the page, but hidden and use <a href="http://fancyapps.com/fancybox/3/docs/#inline" rel="nofollow noreferrer">fancybox to reveal it</a>. This is possibly more accessible.</p>

CC BY-SA 4.0
2021-03-03T11:18:26.093Z
For the Q/A, would it be possible to add integration without fancybox?
JMKelley
CC BY-SA 4.0
2021-03-03T11:23:04.600Z
For sure! Fancybox is a simple solution, but the principles would be the same if you were to custom code it.
dmatthams
CC BY-SA 4.0
2021-03-03T10:58:47.193Z
2021-03-03T10:58:47.193Z
dmatthams
<p>Unsure how to go about doing this. I'm looking to open a related entry in a modal on the same page. In an area, I have a list of houses. On click, I would like the user to open a modal and load the corresponding entry inside it.</p>
<p>Is there an easier way to do this other than AJAX loading it in?</p>

CC BY-SA 4.0
2021-03-03T10:40:34.270Z
Hey, are we talking front-end here?
dmatthams
CC BY-SA 4.0
2021-03-03T10:43:11.827Z
Yep. Can't see anywhere about loading Entries in a modal on a click etc.
JMKelley
<templating>
Open Entry in a Modal
# Open Entry in a Modal

(Asked by: username_0 on 2021-03-03)

Unsure how to go about doing this. I'm looking to open a related entry in a modal on the same page. In an area, I have a list of houses. On click, I would like the user to open a modal and load the corresponding entry inside it.

Is there an easier way to do this other than AJAX loading it in?

**Tags:** templating

> **Comments:**
> **username_1**: Hey, are we talking front-end here?  
> **username_0**: Yep. Can't see anywhere about loading Entries in a modal on a click etc.  

---

## 1 answers

### Answer by username_1 on 2021-03-03. Score: 3 | Accepted answer

Ajax is probably the easiest way when using something like Fancybox:

    House page


If your house page has content you want to hide when viewed in the modal you can detect whether or not Ajax was used to request the page:
{% if not craft.app.request.isAjax %}
    Your header code
{% endif }

You could also just include the house content on the page, but hidden and use fancybox to reveal it. This is possibly more accessible.

> **Comments:**
> **username_0**: For the Q/A, would it be possible to add integration without fancybox?  
> **username_1**: For sure! Fancybox is a simple solution, but the principles would be the same if you were to custom code it.  

---

