- 등록일2024.12.03
- 조회수52
자세히 보기 버튼 클릭하면 레이어 새창으로 내용 출력시시는 방법
참고 : 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">×</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 을 명칭만 변경해서 여러개 생성가능 함