Remodalを使ったデモ

Remodal は 他ライブラリに依存しない modal ライブラリです

npm i sweetalert --save

yarn add sweetalert

<!-- css -->
<link rel="stylesheet" type="text/css" href="https://unpkg.com/remodal@1.1.1/dist/remodal.css" >
<link rel="stylesheet" type="text/css" href="https://unpkg.com/remodal@1.1.1/dist/remodal-default-theme.css">
<!-- javascript -->
<script src="https://unpkg.com/remodal@1.1.1/dist/remodal.min.js"></script>

スニペット下のボタンを押せばRemodalが起動します

公式通りのサンプル

<!-- 呼び出し用ボタン -->
<a href="#modal" class="btn btn-default">Modalデモ</a>

<!-- Modal本体 -->
  <!-- ボタンが押されると呼び出される -->
  <div class="remodal" data-remodal-id="modal">
  <!-- クローズボタン -->
  <button data-remodal-action="close" class="remodal-close"></button>
    <h1>Remodal</h1>
    <!-- your content -->
    <p> Remodalテスト </p>
    <p> Write something. </p>
    <br>
    <!-- キャンセルボタン -->
    <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
    <!-- サブミットボタン -->
    <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
  </div>

フォームサンプル ( font-awesomeとの組み合わせ )

<!-- 呼び出しボタン  -->
<a href="#form" class="btn btn-default"><i class="fa fa-pencil-square-o"></i>フォーム Example </a>

<!-- モーダル本体  -->
  <div class="remodal" data-remodal-id="form">
    <button data-remodal-action="close" class="remodal-close"></button>
    <h1><i class="fa fa-pencil"></i> Form Demo</h1>

    <!-- Form  -->
    <form class="">
      <!-- input  -->
      <div class="form-group">
        <label for="formExample"><i class="fa fa-envelope-o"></i> Email address</label>
        <input type="text" class="form-control input-sm" id="formExample" placeholder="your e-mail">
      </div>
      <!-- input  -->
      <div class="form-group">
        <label for="text2"><i class="fa fa-text-width"></i> Text</label>
        <input type="text" class="form-control input-sm" id="text2" placeholder="your text">
      </div>

      <br>
      <!-- apply bootstrap class  -->
      <button data-remodal-action="cancel" class="btn btn-danger"><i class="fa fa-times"></i> Cancel</button>
      <button data-remodal-action="confirm" class="btn btn-primary"><i class="fa fa-lightbulb-o"></i> OK</button>

    </form>

</div>

iframeを使用したVideoデモ

<!-- 呼び出し用ボタン -->
<a href="#video" class="btn btn-default"><i class="fa fa-play text-danger"></i> Video Example</a>

<!-- Modal本体  -->
<div class="remodal" data-remodal-id="video">
  <button data-remodal-action="close" class="remodal-close"></button>
  <h1><i class="fa fa-video-camera text-primary"></i> Video Example</h1>
  <!-- Vimeoの動画をiframeで取得 -->
  <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://player.vimeo.com/video/134668506' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>

<br>
<button data-remodal-action="cancel" class="remodal-cancel"><i class="fa fa-times"></i> Cancel</button>

</div>