備忘録

備忘録:prettyPopinで開くポップアップが元のページより縦長の場合

投稿日:2013年6月18日 更新日:

久々の更新です、ご無沙汰しています。

とある案件で、ポップアップウィンドウを多用する物があったので
昔から使っているprettyPopinを使用して開発を行なっています。

開かれたポップアップが元のページの高さよりも長い場合が発生することがあるかと思いますが
その場合、背景のオーバーレイが元のページの高さまでしか表示されません。

そこで改造!!

popupするウィンドウの高さは
[popinHeight]という変数に格納されているので

displayPopinのfunctionのページ表示の後に以下を追加

if($(document).height() > popinHeight){
    $('#overlay').css('height',popinHeight+projectedTop+projectedTop);
}

これで元のドキュメントの高さよりもポップアップするウィンドウの高さが長い場合にポップアップするウィンドウの高さ+上下のマージン高さをプラスしたオーバーレイが出来上がります。

簡単でしたね・・・

ad

ad

-備忘録

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

スパム対策 * Time limit is exhausted. Please reload the CAPTCHA.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

備忘録:prettyPopinで開くポップアップページに画像を表示する場合の注意点

「iPad Air」「iPad Mini Retina」来月発売ですね。皆さんは購入されますか?私は「iPad Mini Retina」を在庫が潤沢になった頃に買う予定です。実はこのような仕事をしなが …

no image

備忘録:jQueryのlive-clickがiPadで効かない

ちょっと忙しく、ブロクが更新できていませんが jQueryを利用してiPadでのウェブアプリケーションを開発中です。 そこで起こったちょっとした不具合 jQueryでlive:clickを使用した際に …

WordPressのダッシュボードでJetpackのアクセス解析グラフが表示されない

サッカーワールドカップの組み合わせ抽選会速報なんて書いちゃいました。注目キーワードにあやかって さてさて、数日前にWordpressのプラグインのJetpackのバージョンアップをしたら管理画面のダッ …

備忘録:jQueryで追加されたDOM要素にイベントを割り当てる

jQueryを多用して、WEBベースの管理システムを開発中です。 append等で、初期表示されたHTMLに要素を追加する際の注意点 Javascriptでは初期表示された際の各要素にはイベントが割り …

jquery:autocompleteの改造

久々の更新です。個人的な備忘録なので、あしからず・・・(こうやったほうが、良いよ!!というご意見はどしどしください) 最近はjqueryを表示に重宝しています。 仕事柄、WEBシステムの管理画面を多く …