Loading Bootstrap Modal with onclick function
<p>I'm trying to dynamically load ajax content into a bootstrap modal when a link is clicked. I can load the content fine without the modal but not sure how to simultaneously trigger the modal window to open. It interferes with the onclick function. <a href="http://moniqueshay.com/antiques/" rel="nofollow">Here's the page I'm working on</a>. The goal is to click a thumbnail and open up its details in a modal window. </p>

<p>The following onclick function triggers a function to load a wordpress post type: </p>

<pre><code>&lt;?php
    if ( has_post_thumbnail(get_the_ID())) {
        echo '&lt;a href="#" onclick="displayAntiqueDetails('.get_the_ID().');return false;" title="' . esc_attr( get_the_title() ) . '"&gt;';
        echo get_the_post_thumbnail(get_the_ID(), 'thumbnail', array('class'=&gt;'img-responsive', 'alt'=&gt;get_the_title()));
        echo '&lt;span class="caption"&gt;'.get_post_meta( get_the_ID(), 'antique_item_number', true ). '&lt;/span&gt;';
        echo '&lt;/a&gt;';
    }
?&gt;
</code></pre>

<p>This line of JS calls the content: </p>

<pre><code>function displayAntiqueDetails(post_id){
var urlPart = getUrlPart();
jQuery('.antique-details-container').load(urlPart + '/wp-content/themes/moniqueshay/antique-details.php', {antique_post_id: post_id});
}
</code></pre>

<p>My modal looks like this: </p>

<pre><code>&lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&gt;
&lt;div class="modal-dialog" role="document"&gt;
    &lt;div class="modal-content"&gt;
        &lt;div class="antique-details well"&gt;
            &lt;?php
            if($reserved)echo '&lt;div class="marked reserved"&gt;&lt;/div&gt;';
            if($sold)echo '&lt;div class="marked sold"&gt;&lt;/div&gt;';
            if($new)echo '&lt;div class="marked new"&gt;&lt;/div&gt;';
            ?&gt;
            &lt;div class="row"&gt;
                &lt;div class="col-md-8 antique-image"&gt;
                    &lt;?php
                    if ( has_post_thumbnail($post_id)) {
                        echo get_the_post_thumbnail($post_id, 'full', array('class'=&gt;'img-responsive', 'alt'=&gt;$post_title));
                    }
                    ?&gt;
                &lt;/div&gt;
                &lt;div class="col-md-4"&gt;
                    &lt;div class="antique-thumbs"&gt;
                        &lt;?php
                        global $antique_attachment_id_set;
                        $antique_attachment_id_set = 1;
                        echo do_shortcode($post_content);
                        $antique_attachment_id_set = 0;
                        ?&gt;
                    &lt;/div&gt;
                    &lt;div class="details-list"&gt;
                        &lt;h3 class="text-red"&gt;&lt;?php echo $post_title; ?&gt;&lt;/h3&gt;
                        &lt;p&gt;&lt;span&gt;Length: &lt;/span&gt;&lt;?php echo esc_html($length); ?&gt;&lt;/p&gt;
                        &lt;p&gt;&lt;span&gt;Depth: &lt;/span&gt;&lt;?php echo esc_html($depth); ?&gt;&lt;/p&gt;
                        &lt;p&gt;&lt;span&gt;Height: &lt;/span&gt;&lt;?php echo esc_html($height); ?&gt;&lt;/p&gt;
                        &lt;p&gt;&lt;span&gt;Item #: &lt;/span&gt;&lt;?php echo esc_html($item_number); ?&gt;&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;a class="btn btn-default" href="&lt;?php echo home_url('contact/?contact-subject=I am inquiring about '.urlencode($post_title).' ('.urlencode($item_number).')'); ?&gt;"&gt;Inquiry about this piece &lt;i class="fa fa-share text-red"&gt;&lt;/i&gt;&lt;/a&gt;
                    &lt;div class="social-buttons btn btn-default"&gt;
                        &lt;!-- social buttons go here --&gt;
                        &lt;?php if( function_exists('ADDTOANY_SHARE_SAVE_KIT') ) { ADDTOANY_SHARE_SAVE_KIT(); } ?&gt; 
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p></p>