モーダル

Bootstrapのモーダルを利用しています。オプションなどについて詳しくはBopotstrapのドキュメントを参照してください。

モーダルを呼び出すトリガとなる要素にdata-toggle="modal"、表示したいモーダルのクラスを指定したdata-targetを追加します。

<a class="btn" href="#" data-toggle="modal" data-target=".modal--05">モーダルを開く</a>

表示するモーダルダイアログを.wrapperの外にマークアップします。ボタンなどモーダルを閉じるための要素にはdata-dismiss="modal"を付加します。
右肩の[]ボタンを設置するには、.modal-contentの直下（.modal-headerの上）に

<button type="button" class="close" data-dismiss="modal">
  <span class="icon-abui-cross" aria-hidden="true"></span>
</button>

を記述します。ユーザビリティを考慮し必要に応じて設置して下さい。

<div class="modal with-close fade modal--05" id="modal--05">
  <div class="modal-dialog">
    <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal"><span class="icon-abui-cross" aria-hidden="true"></span></button>
      <div class="modal-header">
        <div class="modal-header--title">タイトル</div>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-12">
            <p class="modal--diaglog--text">子どものみなさん、ゆるしてください。ぼくはこの本をひとりのおとなのひとにささげます。</p>
            <p class="modal--diaglog--text">でもちゃんとしたわけがあるのです。そのおとなのひとは、ぼくのせかいでいちばんの友だちなんです。それにそのひとはなんでもわかるひとで、子どもの本もわかります。しかも、そのひとはいまフランスにいて、さむいなか、おなかをへらしてくるしんでいます。心のささえがいるのです。</p>
            <p class="modal--diaglog--text">まだいいわけがほしいのなら、このひともまえは子どもだったので、ぼくはその子どもにこの本をささげることにします。おとなはだれでも、もとは子どもですよね。（みんな、そのことをわすれますけど。）</p>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <div class="row">
          <div class="col-md-12">
            <button class="btn btn-default btn-block" data-dismiss="modal">ボタン</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

大きいサイズのモーダルは.modal-dialogに.modal-lgを追加します。

<div class="modal-dialog modal-lg">
...
</div>