jQuery 簡単にモーダルウィンドウを実装する方法 (プラグイン不要) | Stronghold Archive
どうもこんばんは。今回は【簡単にモーダルウィンドウを実装する方法 (プラグイン不要)】というネタです。モーダルウィンドウ？という方もいるかと思いますので別の言い方をするとポップアップで小窓が出てくる表現の事を指します。実装方法はとても簡単ですので機会がありましたらお試しください。 コード（2013/4/11更新しました） 基本的には下図の用な仕様になっております。表示するコンテンツを増やす場合にはコピー&ペーストでwd2,wd3…と任意の数にしてください。 $(function(){ $(‘.btns’).click(function(){ wn = ‘.’ + $(this).data(‘tgt’); var mW = $(wn).find(‘.modalBody’).innerWidth() / 2; var mH = $(wn).find(‘.modalBody’).innerHei
SimpleModal | 設置サンプル
確認アラートをモーダル表示 JavaScriptのconfirm関数を上書きするモーダルダイアログです。 設置サンプルのソース <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv=
ウィンドウ、モーダル｜jQuery plugin｜Ajax｜PHP & JavaScript Room
Create a Beautiful Looking Custom Dialog Box With jQuery and CSS3〔CSS3を使用した角丸レイアウトのダイアログボックス〕 jGrowl〔Mac OS XのGrowl風にメッセージ表示〕 jQDialog plugin for jQuery〔軽量のダイアログプラグイン〕 jqModal〔通知ウィンドウ、ダイアログ、モーダルウィンドウを表示〕 jQuery Alert Dialogs (Alert, Confirm, & Prompt Replacements) 〔アラート、確認ダイアログ、入力プロンプトの作成〕 jQuery BlockUI Plugin〔ページや要素のブロック、モーダルダイアログ表示〕 jQuery Tools〔HTMLをオーバーレイ〕 LeaveNotice jQuery Plugin〔リンク先遷移時に通知
★【jquery】クリックで開閉するアコーディオンメニューいろいろ
jQueryのslideToggleを使った、クリックで開閉するアコーディオンメニュー(開閉パネル)を、8種類実装しました。 クリックしたときに開いたままにしておくものや、マウスオーバー時にスタイルを変える、開いたアコーディオンメニュー以外は自動で閉じる、最初から開いておく、閉じるボタンで閉じる、多階層のアコーディオンメニュー、アンカーリンクをクリックで、スクロール＆該当アコーディオンメニューの開閉などのサンプルです。 ナビゲーションメニュー関連記事cssで要素を上下左右に中央寄せするサンプル スクロールしてもコンテンツの範囲内を固定されて追従するサイドメニューの作り方【jQuery】 スマホでスクロールできちゃう!横からスライドして出てくるドロワーメニューのサンプル【jQuery】 jQueryとcssでハンバーガーメニューの開閉ボタンをアニメーション付きで変化させる cssで作る、横並
jQueryでタブの中身を表示・非表示切り替えする
タブ切り替えとアコーディオンを組み合わせたようなものを、jQuery事始めvol.3・プラグインに頼らず自分でクリックで切り替わるタブメニューを作ってみるを参考 にして作成しました。 作成したいものは下記になります。 作り方はトグルに似たような感じですかね。 タブは画像が横並び タブは最初から常に表示、タブの中身は最初非表示 タブがクリックされたらタブの中身表示、再度クリックで非表示 他のタブがクリックされたらタブの中身表示、開いていたタブ非表示 HTML <!--ここがタブ--> <ul class="tab"> <li><a href="#tab1"><img src="https://placehold.jp/3d4070/ffffff/100x50.png?text=tab1" alt="tab1"></a></li> <li><a href="#tab2"><img src="h
jQueryでチェックボックスを操作するさまざまな方法
jQueryでチェックボックスのチェック状態や値の取得、チェックを付けたり外したり、チェック数の制限などさまざまな方法をご紹介します。 通常のイベントでは動かない、jQueryイベントで追加したチェックボックスの操作方法なども併せてお伝えします。 attr() は使わない attr()を使ったチェックボックスの操作は不具合が生じるため、本ページではチェックボックスの取得やチェック等の操作にattr()は使っておりません。 ※もちろん、それ以外については通常どおりattr()は使いますよ。 チェックボックスの取得 チェックが入っているかの状態や、チェックボックスの値を取得、また複数のチェックボックスの値を配列に格納する方法です。 チェックの状態を取得 チェックの状態を取得する3つの方法を一気にご紹介します。 HTML
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
