javascriptポップアップの定番、fancyboxの最新版がリリースされています。(執筆時点でv3.1)レスポンシブにも対応し、今までとデザインも設定も一新されましたので、利用できるオプションをまとめました。画像のマージンの取り方、ズームイン時、ビューポートが800pxより小さい場合は無視されます。コンテンツを"モーダル(ポップアップ時に元の要素が操作不可になるやつ)"にするショートカット。ポップアップ時、URLにハッシュタグがつく機能。ポップアップを閉じようとする前。閉じるをことをキャンセルした場合、falseを返します。ユーザーがfancyBox領域をクリックまたはダブルクリックしたときに実行するアクションをカスタマイズできる。各オプションは、値を返す文字列またはメソッド。関連記事13jQueryを利用したスクロールにあわせて伸縮するメニューの作り方jQueryのイベントを活用すると比較的簡単に導入可能。javascriptfancybox3で、URLにハッシュタグ(#付きのアドレス)が勝手につくのを防ぐ方法fancybox3では、デザイン面が一新されて見やすくなった一方、オプションも複雑になりURLにハッシュタグが勝手につくようになっています。PM有用な記事をありがとうございます。非常に参考になりました。ご存じでしたらご教示いただければと思うのですが、スマートフォンで表示した際に、コンテンツ右上の「閉じる」ボタンが表示されないようです。Chromeの検証ツールでは、「閉じる」ボタンが表示されるときもあるようで、?マークが飛び交っております。AMコメントありがとうございます。私の環境で確認しましたが、PC、スマホ関係なく表示されています。スマホだけで起きるということは、何かレスポンシブの設定をしているか、fancybox以外でのレスポンシブの設定に影響を及ぼすものがあるのかもしれません。以下のあたりを確認されると良いかもしれません。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。新しい投稿をメールで受け取るこの投稿へのトラックバックトラックバックはありません。WordPress%d人のブロガーが「いいね」をつけました。