先に進んで、これが不可能な場合はお知らせください。
ポップアップにGoogleブックスボタンを表示する必要があります(ドキュメントはこちら:https ://developers.google.com/books/docs/preview-wizard )。だから、私が欲しいのは、ユーザーがグーグルボタンをクリックしてグーグルの埋め込みビューアポップアップを取得できるようにするためのグーグルボタンを保持するポップアップです。
ポップアップを実現するために、いくつかのCSSクラスを使用します。
.item-notes {cursor:pointer;}
.item-notes .notes-details {position:absolute; display:none;}
現在、私はこれらのクラスを次のように実装しています。
<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>
私の問題は、「サンプル」セクションも、グーグルブックのプレビューへのリンクを含むポップアップにしたいということです(そして他のいくつかのものですが、質問のために...
だから、私は「サンプル」セクションでこれを試してみます:
<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>
ただし、このスクリプトはポップアップ内に格納されるのではなく、Googleプレビューボタンを保持する別のページにリンクします。