Events app pop up rather than go to page

 <perch:before>
    <div class="eventwrap">
    <span class="day"><perch:events id="eventDateTime" format="j" /></span>
</perch:before>
<!-- Button trigger modal -->
<button type="" class="btn" data-toggle="modal" data-target="#myModal" href="<perch:category id="catSlug" type="slug"/><perch:events id="eventTitle"/>">
    <span class="value-title" title="<perch:events id="eventDateTime" format="c" />"></span>
    <span class="summary <perch:events id="category_slugs" />"><perch:events id="eventTitle" /></span>
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h1 class="modal-title" id="myModalLabel"><perch:events id="eventTitle" /></h1>
      </div>
      <div class="modal-body">
        <h2><perch:events id="eventDescHTML" encode="false" />
        <perch:events id="eventDateTime" format="l, jS F Y g:i a" />
        </h2>
      </div> 
    </div>
  </div>
</div>
<perch:after></div></perch:after>

I have done this on several sites. Basically you have to output all the modals to the page with one template then output all the triggers with another call to a second template. I could look up a working template but it won't be till I get into my office tonight.

Working example would be brilliant. Thanks for the help.

Emily, I thought of one site I worked on that uses this... https://rspgunshop.com

If you view source you will see all the modals grouped at the top, then you will see later all the triggers.

Click on an item and a modal opens, then there is a link to open the actual page in the modal.

See if you can work it out from there... Otherwise I'll get back to you later

after looking again i have tweaked my code:

<perch:before>
    <div class="eventwrap">
    <span class="day"><perch:events id="eventDateTime" format="j" /></span>
</perch:before>
<!-- Button trigger modal -->
<button type="" class="btn" data-toggle="modal" data-target="#myModal" href="/events/event.php?s=2015-10-25-longhoughton">
    <span class="value-title" title="<perch:events id="eventDateTime" format="c" />"></span>
    <span class="summary <perch:events id="category_slugs" />"><perch:events id="eventTitle" /></span>
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h1 class="modal-title" id="myModalLabel"><perch:events id="eventTitle" /></h1>
      </div>
      <div class="modal-body">
        <h2><perch:events id="eventDescHTML" encode="false" />
        <perch:events id="eventDateTime" format="l, jS F Y g:i a" />
        </h2>
      </div> 
    </div>
  </div>
</div>
<perch:after></div></perch:after>

the only bit i actually need advise on is how to get the correct slug here:

<button type="" class="btn" data-toggle="modal" data-target="#myModal" href="/events/event.php?s=2015-10-25-longhoughton">

in the href

i tried this

<button type="" class="btn" data-toggle="modal" data-target="#myModal" href="/events/event.php?s=<perch:events id="eventDateTime" format="Y-j-n" />-<perch:events id="eventTitle" />">

but not working.

I have figured it out:

<perch:before>
    <div class="eventwrap">
    <span class="day"><perch:events id="eventDateTime" format="j" /></span>
</perch:before>
<!-- Button trigger modal -->
<button type="" class="btn" data-toggle="modal" data-target="#<perch:events id="eventDateTime" format="Y-n-j" />-<perch:events id="eventTitle" />" ">
    <span class="value-title" title="<perch:events id="eventDateTime" format="c" />"></span>
    <span class="summary <perch:events id="category_slugs" />"><perch:events id="eventTitle" /></span>
</button>
<!-- Modal -->
<div class="modal fade" id="<perch:events id="eventDateTime" format="Y-n-j" />-<perch:events id="eventTitle" />" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h1 class="modal-title" id="myModalLabel"><perch:events id="eventTitle" /></h1>
      </div>
      <div class="modal-body">
        <h2><perch:events id="eventDescHTML" encode="false" />
        <perch:events id="eventDateTime" format="l, jS F Y g:i a" />
        </h2>
      </div> 
    </div>
  </div>
</div>
<perch:after></div></perch:after>

Emily,

Normally I use perch_item_count to serialize the modals to the buttons. Of course this is when I have multiple modals being output on the same page.

If you got it all working now that's great. Hope I was able to answer your questions.

Robert