WEB制作(html・css(スタイルシート))に関する各種メモ書き

Bootstrapによるモーダルウィンドウ

『動作デモ』

Bootstrapのモーダルウィンドウは

● モーダル起動ボタン

<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal1">モーダルウィンドウ1</button>

● モーダルウィンドウ

  <div class="modal fade" id="myModal1" role="dialog">
    <div class="modal-content">
    モーダルウィンドウ最小セット
    </div>
  </div>

でとりあえず起動します。

自分で好きなウィンドウにすることもできます

● オリジナルのモーダルウィンドウ

  <div class="modal fade" id="myModal1" tabindex="-1" role="dialog">
    <div style="width:300px; height:300px; background: white; border:10px solid red;">
    aaaaaaaaaaaaaaaaaaaa<br>
    aaaaaaaaaaaaaaaaaaaa<br>
    aaaaaaaaaaaaaaaaaaaa<br>
    aaaaaaaaaaaaaaaaaaaa<br>
    </div>
  </div>

Bootstrapらしいモーダルウィンドウにする場合は

● Bootstrapらしいモーダルウィンドウ

  <div class="modal fade" id="myModal1" tabindex="-1" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">ウィンドウタイトル</h4>
        </div>
        <div class="modal-body">
          <p>テキスト</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

とします。

『動作デモ』はこちら

関連エントリー

添付ファイル1
No.1042
05/22 14:04

edit

添付ファイル

Bootstrap