[Resolved] Need to display event archive page content on popup when clicking on image/title

[Author]

Posts

[julianL-2]

I want to display EVENT archive page content on popup(single event page content) instead of going to the new page, clicking on image or event title or read more button(not added yet). I already created the custom post type Event and added a few sample event there. Hoping to display that page content.

This is the development page
hidden link

I greatly appreciate if you can help/guild me on this matter. Also, I am not a coder and looking for a simple solution.

[Minesh]

Hello. Thank you for contacting the Toolset support.

Well - You can use the bootstrap modal to display your single post content in the popup.

If you can share access details, I will try to integrate with your view.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I would additionally need your permission to de- and re-activate Plugins and the Theme, and to change configurations on the site. This is also a reason the backup is really important. If you agree to this, please use the form fields I have enabled below to provide temporary access details (wp-admin and FTP).

I have set the next reply to private which means only you and I have access to it.

[julianL-2]

I would like to do it my self first, could you provide me with the instructions? Thx

[Minesh]

Well - you can add the following code to your view's loop and adjust the formatting as needed:

<!-- Trigger the modal with a  image -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal-[wpv-post-id]"><img src="[wpv-post-featured-image output='url']" /></button>

<!-- Trigger the modal with a  post title -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal-[wpv-post-id]"> [wpv-post-link]</button>
          

<!-- Modal -->
<div id="myModal-[wpv-post-id]" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p> [wpv-post-body view_template="None"] </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>