Go ahead and let me know if this is not possible:
I need to have the google books button display in a pop-up (documentation here: https://developers.google.com/books/docs/preview-wizard). So, what I want is a pop-up that holds the google button for users so that they can click it and get google’s embedded viewer pop-up.
I use a couple CSS classes to achieve my pop-up:
.item-notes {cursor:pointer;}
.item-notes .notes-details {position:absolute; display:none;}
Currently, I implement these classes like so:
<div class="link"><a href="#"><img src="images/icon_read.jpg" alt="" /></a> <a href="#">Sample</a></div>
<div class="link item-notes">
<div class="notes-details"><h3>Notes</h3><p>Lorem Ipsum</p></div><a href="#"><img src="images/icon_notes.jpg" alt="" /></a> <a href="#">Notes</a></div>
My issue is that I want the “Sample” section to also be a pop-up that that contains a link to a google books preview (and some other things, but for the sake of the question…
So, I try this for the “Sample” section:
<div class="link item-notes">
<div class="notes-details">
<script type="text/javascript" src="http://books.google.com/books/previewlib.js"></script>
<script type="text/javascript"> GBS_insertPreviewButtonPopup(['ISBN:9780596527068']);</script></div>
<a href="#"><img src="images/icon_read.jpg" alt="" /></a> <a href="#">Sample</a></div>
But instead of this script being housed within the pop-up, it links to another page that holds the Google Preview button.
The sad fact is that this is impossible. I even posed this question to a whole web-development team, and they confirmed. You can’t how the javascript button inside of a css pop-up. One of the two always breaks.