Embedded qtip2 Modal in Fullcalendar + Google Calendar

Question

I am using FullCalendar 2.3.1, qtip2.2.1 and multiple Google Calendar feeds.

So I finally got my qtips to work in my Fullcalendar (yay!), but now I'd like to see about getting a modal qtip to appear when an event is clicked on ( eventClick ).

Currently I have eventClick set to:

// opens events in a popup window
eventClick: function(event) {
                window.open(event.url, 'gcalevent', 'width=600,height=400,top=200,left=200');
                return false;               
            },

I'd like to get a modal to appear instead, with the event.url portion embedded within in. qtip2 has modal functionality, and I got that included when I downloaded qtip2, but I just can't seem to figure out how to get the modal part functioning with a page embedded in it. And all the other resources online seem to be specifically with Bootstrap, not qtip2. Or some other plugin.

I know part of it is using qtip's show: modal: on: true and using an iframe. It's just the proper sequence I can't seem to get.

This is the coding I have for my general qtips, so I wasn't sure if there was a way I could modify it to function on eventClick instead, and again, with the embedded page for event.url

eventRender: function(event, element, view) {
if (view.name !== "agendaDay"){
                element.qtip({
                    content: {
                        title: 'Click the event to open it in  <br/>Google Calendar',
                        text: '<b>Title: </b>' + event.title +
                        '<br/><br/><b>Location: </b>' + event.location +
                        '<br/><br/><b>Details: </b>' + event.description
                    },
                style: {
                    widget: true, // Use the jQuery UI widget classes
                    def: false, // Remove the default styling
                    classes: 'qtip-rounded qtip-shadow'
                    },
                position: {
                    my: 'bottom center',
                    at: 'top center'
                    },
                show: {
                    event: 'mouseenter'
                    },
                hide: {
                    event: 'mouseleave',
                    leave: false
                    }
                });
                }
            }

Many, many, many thanks in advance! I've spent so much time digging in StackOverflow and it's come to just having to ask. I'm feeling rather foolish and really do appreciate all help.