FC2ブログ

モーダルウインドウ作成

モーダルウインドウ作成

モーダルウインドウは、ユーザになんらかの操作を
促すウインドウ

必要なのは呼び出すボタンと
ウインドウ

まずはボタンを a要素で作成

,a href="#myModal" class="btn" data-toggle="modal">Modal window</a>

これで
class="btn" によりリンクがボタンの形になる

そして、次にウインドウの作成
これは
<div id="myModal" class="modal h8ide fade">
</div>
としてウインドウをつくる

そして、スマホページのように
ヘッダー
ボディ
フッターを作成する

ヘッダーは
<div class="modal-header">
</div>

ボディは
<div class="modal-body">
</div>

フッターは
<div class="modal-fotter">
</div>
で作成

それぞれに記述していく

ヘッダーには閉じるボタンをつけたいので
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal">×</a>
</div>
とする
スポンサーサイト



テーマ : プログラミング
ジャンル : コンピュータ

コメント

非公開コメント

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック