Web Material Memo Pad

Article

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

BootstrapのModalsで画像ポップアップ

Bootstrapを使っていて
画像をポップアップした時
Modalsを使えばすぐにそれっぽいのが出来ます。

手軽にやりたい方向け…
次へ次へとしたい方は面倒なBootstrap Image Gallery等を使ってください。
分かりやすい解説してくれてるサイトさん

こちらが基本的なModals(モーダル)

EXAMPLE

これを画像にしてしまいます。

<a data-toggle="modal" data-target=".bs-example-modal-sm"><img src="images/carnavalawa.jpg" alt="オルト" width="15%" class="img-thumbnail"></a>
<!--下記が表示部分-->
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-sm">
		<div class="modal-content text-center">
			<img src="images/carnavalawa.jpg" width="100%" data-dismiss="modal">
		</div>
	</div>
</div>

data-target=".bs-example-modal-sm"でクラス名を指定して(なんでも良い)
※同じページに複数設置する場合は変えてください。
そのままだとマウスポインターがデフォルトのままで変わらないので、スタイルで

styleName{/*スタイル名*/
	cursor:pointer;
}

としてあげればリンクっぽくなります。

noimageクリックしてみてください。

こんな感じになります。
同じ画像でも別の画像(小さいサムネイル)でもOK
画像をクリックしても閉じるように「data-dismiss="modal"」を画像にも指定してます。
拡大画像にリンクを貼りたい時は「data-dismiss="modal"」は削除します。

以下のクラスで横幅を決めているので
.modal-lg 横幅900px
なし 横幅600px
.modal-sm横幅300px
※画面サイズで変わります。
今回はmodal-smを指定
例えば
modal-lg(900px)を指定して横幅700pxの画像にするとちょっと引き伸ばされたり
modal-sm(300px)に300px以上の画像を指定するとズレるので
ご注意ください。 画像の大きさを合わせるかCSSで調節してください。

スポンサーサイト

Comment

Commentform

user information
(編集・削除用):
管理者にだけに表示
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。