Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-03-03T11:18:26.093Z
Answers.Text: For the Q/A, would it be possible to add integration without fancybox?
Answers.UserDisplayName: JMKelley
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-03-03T11:23:04.600Z
Answers.Text: For sure! Fancybox is a simple solution, but the principles would be the same if you were to custom code it.
Answers.UserDisplayName: dmatthams
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-03-03T10:58:47.193Z
Answers.LastActivityDate: 2021-03-03T10:58:47.193Z
Answers.UserDisplayName: dmatthams
Body: <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>
  
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2021-03-03T10:40:34.270Z
Comments.Text: Hey, are we talking front-end here?
Comments.UserDisplayName: dmatthams
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2021-03-03T10:43:11.827Z
Comments.Text: Yep. Can't see anywhere about loading Entries in a modal on a click etc.
Comments.UserDisplayName: JMKelley
Tags: <templating>
Title: Open Entry in a Modal
ThreadText: # 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](http://fancyapps.com/fancybox/3/docs/#iframe):
  
  ```
  <a data-fancybox data-type="ajax" data-src="yoursite.com/houses/house-slug" href="javascript:;">
      House page
  </a>
  
  ```
  
  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](http://fancyapps.com/fancybox/3/docs/#inline). 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.  
  
  ---
  
  