jangajan.com

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

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

/ 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
© 2020, Built with Gatsbyby @ta1kt0me