Bootstrap4에서 모달 표시

13478 단어 bootstrap4modal

개요



프론트 프레임워크를 사용해 보았으므로 메모한다.

샘플


<!DOCTYPE html>
<html lang="ja">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>BootStrap Sample</title>

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-12">

        <!-- modal open button -->
        <div class="text-center">
          <button type="button" class="btn btn-primary" id="btn">Modal Open.</button>
          <div id="msg"></div>
        </div>

        <!-- modal content -->
        <div class="modal fade" id="modal">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title">メッセージ</h5>
              </div>
              <div class="modal-body">
                <p>please entry message!</p>
                <input type="text" class="form-control" id="input-1" placeholder="メッセージを入力する">
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close(自動)</button>
                <button type="button" class="btn btn-secondary" id="close">Close(手動)</button>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script>
    (function($){
      const message = $('#msg');

      $('#btn').on('click', function(){

        const content = $('#modal');
        content
          // モーダル開始前の処理
          .on('show.bs.modal', () => {
            console.log('modal open start');
          })
          // モーダル開始後の処理
          .on('shown.bs.modal', () => {
            console.log('modal open complete');
          })
          // モーダル終了前の処理
          .on('hide.bs.modal', () => {
            console.log('modal hidden start');

            // 入力されたメッセージを挿入する
            const str = $('input', content).val();
            if (str.length > 0) {
              message.text(str);
            }
          })
          // モーダル終了後の処理
          .on('hidden.bs.modal', () => {
            console.log('modal hidden complete');

            // 後片付け
            $('input', content).val('');
          })
          .modal({
            backdrop: 'static',
            keyboard: true
          });

        // Close(手動)ボタン
        $('#close', content).on('click', () => {
          content.modal('hide');
        });
      });
    })(jQuery);
  </script>
</body>
</html>

실행해보십시오.


참고 사이트


  • 부트스트랩 4 모달
    • Bootstrap4에서 팝오버 표시
    Bootstrap4에서 표시/숨기기(collapse)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage