JanGaJan.com

Is fun? JOY!

bootstrap3のモーダル表示(HAMLサンプル)

bootstrap3でModalウインドウを表示するサンプルです。 サンプルはHAML形式です。

呼び出しのボタンで、data-toggle="modal"data-target="#表示するモーダルのid"を指定します。
Modalは下のdiv構成で組むことで表示できます。
#task-modalは呼び出すModalで設定したものを指定します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/ Modalの呼び出し元になるボタン
%button.btn.btn-info.btn-lg.btn-block{data: {toggle: 'modal', target: '#task-modal'}}
  Create Modal Task

...(略)

/ 表示するModal
%div.modal#task-modal
  %div.modal-dialog
    %div.modal-content
      %div.modal-header
        %button.close{type:'button', data: {dismiss: 'modal'}}
          X
        %h4.modal-title
          TITLE
      %div.modal-body
        %p
          BODY
      %div.modal-footer
        %button.btn.btn-primary{type: 'button'}
          Save

Comments