• TOP
케이홈테마 상담신청
  • 문의항목
  • 성함
  • 이메일
  • 연락처
  • 제목
Fullfill Heart, Design Dream
BUISINESS
기타
링크 클릭 시 레이어 새창으로 페이지 열기
  • 등록일2024.12.03
  • 조회수81

자세히 보기 버튼 클릭하면 레이어 새창으로 내용 출력시시는 방법

참고 : http://sycenter.khome137.kr/bbs/content.php?co_id=program08

 

 

1. 스타일 입력

 

<style>

    .view-agreement { display: inline-block; vertical-align: middle;  text-decoration: underline;    }
    .modal .modal-content { padding: 30px 30px; width:1000px; margin-left:-150px;  margin-top:50px;  text-align: right !important;   }
    .modal .modal-content .close{float: right; text-align: right; width:100%; padding-right: 10px;    }
    .modal .content { padding: 10px; overflow-x: hidden; overflow-y: auto; margin: 10px 0 0; color: #333; font-size: 16px; font-weight:400; height: 600px;}
    
    .modal .btns a { display: block; width:100%; padding: 15px 0; text-align: center; cursor: pointer; }
    .modal .btns .btn-cancel {background-color: #195dae; color: white; }
    .modal .btns .btn-cancel:hover {background-color: #134680; }
    .modal .btns .btn-ok { background-color: #195dae; color: white; }
    .modal .btns .btn-ok:hover { background-color: #134680; }

</style>

 

2. 레이어 새창 링크 버튼

 

<div class="btn"><a class="a view-agreement"    href="javascript:void(0)" data-toggle="modal" data-target="#modal-agreement1">자세히 보기</a></div>

 

3. 레이어 새창 내용

 

 <div id="modal-agreement1" class="modal fade" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></div>                        
                    <div class="content">
                       레이어 새창에 들어갈 내용 입력
                    </div>
                 </div>

                <script>
                    $(function () {
                        $('#modal-agreement1 .btn-ok').click(function () {
                            byId('cb-agreement').checked = true;
                        });
                    });
                </script>
            </div>  
</div>

 

링크 새창 페이지가 여러개일 경우  내용을 복사해서 필요한 만큼 생성하면 됨. modal-agreement1 을 명칭만 변경해서 여러개 생성가능 함

댓글 0

댓글목록

등록된 댓글이 없습니다.