ポップアップが画面内に収まらない場合に自動的に表示位置を調整する CSS Anchor Positioning
ポップアップが画面内に収まらない場合に自動的に表示位置を調整する CSS Anchor Positioning 2024.04.13 CSS Anchor Positioning とは、特定の要素を Anchor（基準）としてツールチップなどの要素の位置を決定する機能の総称です。CSS Anchor Positioning を使用することで、Floating UI のように自動で画面内に表示されるツールチップやコンテキストメニューを実装できます。 CSS Anchor Positioning は 2024 年 4 月現在 Chrome Canary でのみ利用可能です。 CSS Anchor Positioning とは、特定の要素を Anchor（基準）としてツールチップなどの要素の位置を決定する機能の総称です。CSS Anchor Positioning を使用することで、Floati
WinBox - HTML5 window manager
WinBox is a modern HTML5 window manager for the web. Lightweight, outstanding performance, no dependencies, fully customizable, free and open source! Please feel free to support me by making a personal donation which helps me a lot to keep this project alive and also to providing all the contribution to keep WinBox.js on a professional top-end level. Thanks a lot, Thomas (ts-thomas) Load Library (
iOS14から使用できるUIMenuの実装について - Qiita
はじめに iOS Advent Calendar 2020 の18日目になります！ 今回は、WWDC20にて紹介されていましたUIMenuの新機能について焦点を当ててみようと思います。 UIMenu自体はiOS13から使用できるのですが、 iOS14からはUIButtonやUIBarButtonItemにも使用可能となった内容がありましたので、おさらい的な紹介ができればと思います🙇♂️ とはいっても、すでにとても分かりやすくまとめられている記事がありましたので、細かい説明は割愛させていただきます。 本記事では、実際にコードで書いてみて使い心地を感じられればと思います。 UIMenu： https://developer.apple.com/documentation/uikit/uimenu WWDC20： https://developer.apple.com/videos/play
aria-haspopup属性 | HTMLリファレンス
aria-haspopup属性はドポップアップメニューが存在するかどうかを示すためのWAI-ARIAの属性です。 aria-haspopup属性にtrueを指定することでUAに対してポップアップが存在することを示します。 <a href="#popup" aria-haspopup="true">ファイル</a> <p id="popup">jpeg/pngが対象</p> 参考URLaria-haspopup属性 - WAI-ARIA - W3C 登録日 : 2015年10月06日 最終更新日 : 2015年10月6日 同じカテゴリー(WAI-ARIA)のエントリー aria-required属性 aria-current属性 aria-orientation属性 aria-multiselectable属性 aria-multiline属性 aria-live属性 aria-level属
User Onboarding and Product Walkthrough Library | Intro.js
Powerful User OnboardingBuilt to Increase AdoptionIntro.js is a lightweight JavaScript library for creating step-by-step and powerful customer onboarding tours
モーダルを表示したときに背景部分はスクロールできないようにする - Qiita
モーダルを表示させたとき、何も考えずにコーディングするとモーダルをスクロールしたいのに背景までスクロールされちゃう、 なんてことに陥りがち。 (モーダルの上端・下端を超えるスクロールをしたときや、モーダル外にカーソルを置いてスクロールしたとき等) これを防ぐには、モーダルが表示されているときは背景要素をfixedにするのが良さげ。 <div id="wrapper"> <p class="open"> <button>open modal</button> </p> </div> <section id="modal"> <!--modal content --> </section> // include jQuery var current_scrollY; // OPEN MODAL $( '.open button' ).on( 'click', function(){ curre
Lightbox
DemoDemos are largely unstyled to give developers a better idea of how the plugin can drop into a new or existing project. <a href="large_1.jpg" class="lightbox" data-lightbox-gallery="gallery_name" title="Image caption text."> <img src="thumbnail_1.jpg" alt=""> </a> <a href="large_2.jpg" class="lightbox" data-lightbox-gallery="gallery_name" title="Image caption text."> <img src="thumbnail_2.jpg"
厄介なポップアップブロックを無理矢理回避する方法 | マピオンブログ
window.openで新しいウィンドウを開きたいのに、ポップアップブロックに邪魔されて開けないときがあります。 この解決方法をEvernoteサイトメモリーの対応をしているときに発見したので紹介します。 なぜ開かないのか 開かないパターンを知るために、いくつかサンプルを用意しました。 開くパターン １）直接window.openを実行する ウィンドウを開く <a href="javascript:void(0)" onclick="window.open('http://www.mapion.co.jp', '_blank', 'width=500,height=480');return false;">ウィンドウを開く</a> ２）関数内で素直に実行 ウィンドウを開く <script type="text/javascript"> function openWindow() { win
カッコよく動くポップアップでより分かりやすくメッセージを表示出来る「JQUERY BUBBLE POPUP」:phpspot開発日誌
カッコよく動くポップアップでより分かりやすくメッセージを表示出来る「JQUERY BUBBLE POPUP」 2010年11月29日- JQUERY BUBBLE POPUP v.2.3.1 - display animated and shadowed "bubble" popups with few lines of code in jQuery カッコよく動くポップアップでより分かりやすくメッセージを表示出来る「JQUERY BUBBLE POPUP」 カーソルを合わせた際に、単にポップアップするのではなく、ポップアップ自体がフェードインアニメーションしながら動きをもって表示されることでより、利用者の注意をひくことができそうです。 見た目も影付きでカッコいいのが特徴です。 デザインは選べます。 何かにカーソルを合わせた時だけじゃなくて最初から特定のエレメント上に表示しておくこともでき
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Popover API - JavaScript不要、HTMLのみでポップオーバーUI
Web ブラウザのポップアップブロック問題