모달창 html 소스

Tip & Tech

활용팁

홈 > 회원포럼 > 활용팁
활용팁

모달창 html 소스

5 나눔샵 1 196 0 1

<button class="btn btn-default" data-target="#layerpop" data-toggle="modal">모달테스트</button><br/>

<div class="modal fade" id="layerpop" >

<div class="modal-dialog">

<div class="modal-content">

<!-- header -->

<div class="modal-header">

<!-- 닫기(x) 버튼 -->

<button type="button" class="close" data-dismiss="modal">×</button>

<!-- header title -->

<h4 class="modal-title">LOGIN</h4>

</div>

<!-- body -->

<div class="modal-body">

</div>

<!-- Footer -->

<div class="modal-footer">

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

</div>

</div>

</div>

</div>


1 Comments
5 나눔샵 07.03 10:04  
<!-- modal 구동 버튼 (trigger) -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Modal 띄우기
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal 제목</h4>
      </div>
      <div class="modal-body">
        Modal 내용
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">닫기</button>
      </div>
    </div>
  </div></div>
제목
최근 글
최근 댓글
Facebook Twitter GooglePlus KakaoStory KakaoTalk NaverBand