• Q&A
  • 회원가입
  • 로그인

[basic] BS3 - Modal (BS모달) ★ - 새창팝업

Modal 정의

 

현재 페이지 위에 표시되는 대화 상자 / 팝업 창. 

 


 

모달 플러그인은 아래 파일들 중 하나 추가하면 됨.

개별: "modal.js" 파일.

통합: "bootstrap.js" (또는 "bootstrap.min.js"사용)

 

 

Modal 구문

 

<!-- Trigger the modal with a button -->

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>


<!-- Modal -->

<div id="myModal" class="modal fade" role="dialog">

  <div class="modal-dialog">


    <!-- Modal content-->

    <div class="modal-content">

      <div class="modal-header">

        <button type="button" class="close" data-dismiss="modal">&times;</button>

        <h4 class="modal-title">Modal Header</h4>

      </div>

      <div class="modal-body">

        <p>Some text in the modal.</p>

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

      </div>

    </div>


  </div>

</div>

 


[코드 해석] 

 

"Trigger" 부분 :

data-toggle="modal"  :  모달 창 열기

data-target="#myModal"  :  모달의 ID 가리킴

 

"Modal" 부분 :

id="myModal" :  모달 띄우는 데 사용된 data-target 속성값 ( "myModal")과 동일한 ID 와야 함.

.modal 클래스 :  <div>의 내용을 모달로 식별하고 focus 맞춤.

.fade 클래스  :  모달을 fade in 및 fade out하는 전환 효과 추가. 원치 않으면 제거.

role="dialog"  :  스크린 리더를 사용하는 사람들의 접근성을 향상 시킴.

.modal-dialog 클래스 :  모달의 적절한 폭과 여백 설정.


"Modal Contents" 부분 :

.modal-content 클래스  :  모달 스타일 (테두리, 배경색 등). 이 안에 모달 헤더, 본문, 꼬리말 추가.

.modal-header 클래스  :  모달 헤더 스타일 정의. 

data-dismiss="modal"  :  모달 닫기.

.close 클래스 : 닫기 버튼 스타일 정의.

.modal-title 클래스 :  모달제목 적절한 라인 높이.

.modal-body 클래스  :  모달 본문의 스타일 정의. 여기에 HTML 마크 업 추가. 단락, 이미지, 비디오 등

.modal-footer 클래스  :  모달 꼬리말 스타일 정의. (기본적으로 오른쪽 정렬.)

 

 

Modal Size (크기)

 

<div class="modal-dialog modal-sm">

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

 

 

 

CSS

 

.modal-title {

    margin: 0;

    line-height: 1.42857143;

}

 

 

 

JS Modal

 

Modal Class (클래스)

 

.modal

모달 생성.

 

.modal-content

테두리, 배경색 등으로 모달의 스타일을 올바르게 지정.

이 클래스를 사용하여 모달의 머리글, 본문, 꼬리말 추가.

 

.modal-header

모달의 헤더 스타일을 정의.

 

.modal-body

모달 본문의 스타일을 정의.

 

.modal-footer

모달의 바닥 글 스타일을 정의.

참고 :기본적으로, 오른쪽 정렬.  (변경하려면, text-align : left|center로 CSS 재정의.)

 

.modal-sm

작은 모달 지정.

 

.modal-lg

큰 모달 지정

 

.fade

모달을 서서히 나타나거나 사라지게 하는 animation/transition 효과 추가.

 

 

Modal 방법 - data-* 속성 이용

[Modal 촉발 버튼 유형]

 

<!-- Button 태그 -->

<button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>


<!-- a 태그 -->

<a data-toggle="modal" href="#myModal">Open Modal</a>


<!-- 그외 요소 -->

<p data-toggle="modal" data-target="#myModal">Open Modal</p>

 


[예제]

 

<!-- modal 띄우는 버튼 -->

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>


<!-- Modal -->

<div class="modal fade" id="myModal" role="dialog">

    <div class="modal-dialog">

    

      <!-- Modal content-->

      <div class="modal-content">

        <div class="modal-header">

          <button type="button" class="close" data-dismiss="modal">&times;</button>

          <h4 class="modal-title">Modal 제목</h4>

        </div>

        <div class="modal-body">

          <p>Modal 내용</p>

        </div>

        <div class="modal-footer">

          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

        </div>

      </div>

      

    </div>

</div>

 

 

Modal 방법2 - JS 이용

 

<!-- Modal 촉발 버튼 -->

<button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button>


<!-- Modal -->

<div class="modal fade" id="myModal" role="dialog">

    <div class="modal-dialog">

    

      <!-- Modal content-->

      <div class="modal-content">

        <div class="modal-header">

          <button type="button" class="close" data-dismiss="modal">&times;</button>

          <h4 class="modal-title">Modal Header</h4>

        </div>

        <div class="modal-body">

          <p>Some text in the modal.</p>

        </div>

        <div class="modal-footer">

          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

        </div>

      </div>

      

    </div>

</div>

...

<script>

$(document).ready(function(){

    $("#myBtn").click(function(){

        $("#myModal").modal();

    });

});

</script>

 


Modal Option (옵션)

 

backdrop

모달에 어두운 오버레이 배경 추가 여부 지정.

가능 옵션값 종류: boolean | static  (기본값: true)

true - 어두운 오버레이 (기본값)

false - 오버레이 없음 (투명)

"static" - Modal 외부 클릭 할 때 모달을 닫을 수 없음.

 

keyboard

Esc 키로 모달을 닫을 수 있는지 여부 지정.

가능 옵션값 종류: boolean  (기본값: true)

true - Esc 키로 Modal 닫기 가능.

false - Esc 키로 Modal 닫기 불가능.

 

show

초기화 될 때 모달을 표시할지 여부를 지정.

가능 옵션값 종류: boolean  (기본값: true)

 

 

Modal Method (메서드)

 

.modal (options)

컨텐츠를 모달로 활성화. 유효값은 위 옵션 참조.

 

.modal ( "toggle")

모달을 토글.

 

.modal("show")

모달 보이기.

 

.modal("hide")

모달 숨기기. 

 

 

Modal Event (이벤트)

 

show.bs.modal

모달이 표시 될 때 발생.

 

shown.bs.modal

모달이 완전히 표시되면 발생. (CSS 전환 완료 후)

 

hide.bs.modal

모달을 숨기려고 할 때 발생.

 

hidden.bs.modal

모달이 완전히 숨겨져있을 때 발생. (CSS 전환 완료 후) 

 

 

 

Modal Outlogin (아웃로그인)

 

<style>

.modal-header, h4, .close {

    background-color: #5cb85c;

    color:white !important;

    text-align: center;

    font-size: 30px;

}

.modal-footer {

    background-color: #f9f9f9;

}

</style>

...

 

<!-- Modal 촉발 버튼 -->

<button type="button" class="btn btn-default btn-lg" id="myBtn">로그인</button>


<!-- Modal -->

<div class="modal fade" id="myModal" role="dialog">

    <div class="modal-dialog">

    

      <!-- Modal content-->

      <div class="modal-content">

        <div class="modal-header" style="padding:35px 50px;">

          <button type="button" class="close" data-dismiss="modal">&times;</button>

          <h4><span class="glyphicon glyphicon-lock"></span> Login</h4>

        </div>

        <div class="modal-body" style="padding:40px 50px;">

          <form role="form">

            <div class="form-group">

              <label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>

              <input type="text" class="form-control" id="usrname" placeholder="Enter email">

            </div>

            <div class="form-group">

              <label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>

              <input type="text" class="form-control" id="psw" placeholder="Enter password">

            </div>

            <div class="checkbox">

              <label><input type="checkbox" value="" checked>Remember me</label>

            </div>

              <button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button>

          </form>

        </div>

        <div class="modal-footer">

          <button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>

          <p><a href="#">회원가입</a></p>

          <p><a href="#">정보찾기</a></p>

        </div>

      </div>

      

    </div>

</div> 

...

<script>

$(document).ready(function(){

    $("#myBtn").click(function(){

        $("#myModal").modal();

    });

});

</script>

 

결과보기


오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012