안녕하세요.
워드프레스 게시판 케이보드 사용중입니다.
https://www.cosmosfarm.com/threads/document/27554
이 게시글을 참고하여 팝업창으로 하는건 성공했는데,
저희가 원하는 방향이랑 달라서
댓글에 기재되어있는 모달창 형식으로 바꾸려고 하니 잘 안되서 문의글 올립니다.
사용중인 테마는 모던갤러리스킨입니다.
안녕하세요~^^
올려주신 내용만으로는 어떤 부분이 문제가 되는지 원인을 파악하기 어렵습니다.
만약, 스킨 파일을 수정하신 경우라면
어떤 파일의 어느 부분을 수정하셨는지 알려주시겠어요?
프로그램 코드를 올려야 할 경우 에디터의 코드 스니펫 삽입 기능을 사용해주세요.
고맙습니다.
FTP로 접속해서 /wp-content/plugins/kboard/skin/사용중인스킨/list.php 파일에
아래 코드와 비슷하게 생긴 부분을
<a href="<?php echo $url->set('uid', $content->uid)->set('mod', 'document')->toString()?>">
아래코드로 변경하였습니다.
<a href="<?php echo $url->set('uid', $content->uid)->set('mod', 'document')->toString()?>" onclick="window.open(this.href, '<?php echo $content->title?>', 'width=700, height=800, scrollbars=yes'); return false;">
수정하였더니 팝업형식으로 뜨게 하는건 성공했습니다.
허나 저희가 원하는것은 모달창 형식입니다.
게시글 클릭시, 아래의 사진처럼 이미지모달창이 뜨게 하고싶습니다.
https://imgur.com/a/vzoT71Z
참고로 사용하고 있는 테마는 모던갤러리스킨 입니다.
레이어 팝업으로 표시되게 하시려면
아래 답변의 내용을 참고해보시겠어요?
https://www.cosmosfarm.com/threads/document/27554#document-answer-27563
사용 중이신 스킨에 따라 코드가 조금 다를 수도 있습니다.
직접 코드를 수정하기 어려우신 상황이라면
프로젝트 의뢰에 상세 내용을 올려보세요.
https://www.cosmosfarm.com/project
고맙습니다.
답변감사합니다.
첨부해주신 링크를 보고참고하여 아래의 코드로 변경하였습니다.
<div id="kboard-modern-gallery-list">
<div class="kboard-header">
<!-- 카테고리 시작 -->
<?php
if($board->use_category == 'yes'){
if($board->isTreeCategoryActive()){
$category_type = 'tree-select';
}
else{
$category_type = 'default';
}
$category_type = apply_filters('kboard_skin_category_type', $category_type, $board, $boardBuilder);
echo $skin->load($board->skin, "list-category-{$category_type}.php", $vars);
}
?>
<!-- 카테고리 끝 -->
</div>
<!-- 리스트 시작 -->
<ul class="kboard-list">
<?php while($content = $list->hasNext()): $resize_img_src = $content->getThumbnail(290, 215);?>
<li class="kboard-list-item">
<a href="<?php echo $url->set('uid', $content->uid)->set('mod', 'document')->toString()?>" onclick="window.open(this.href, '<?php echo $content->title?>', 'width=700, height=800, scrollbars=yes'); return false;" class="kboard-item-thumbnail" style="background-image:url(<?php echo $resize_img_src?>);filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='<?php echo $resize_img_src?>',sizingMethod='scale');-ms-filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='<?php echo $resize_img_src?>',sizingMethod='scale');">
<?php if(!$resize_img_src):?><i class="icon-picture"></i><?php endif?>
</a>
<div class="kboard-item-description">
<a href="<?php echo $url->set('uid', $content->uid)->set('mod', 'document')->toString()?>" onclick="window.open(this.href, '<?php echo $content->title?>', 'width=700, height=800, scrollbars=yes'); return false;" class="kboard-item-avatar">
<?php echo get_avatar($content->getUserID(), 24, $skin_path.'/images/default-avatar.png', $content->getUserName())?>
<img src="<?php echo $skin_path?>/images/avatar-mask.png" alt="" class="kboard-item-avatar-mask">
</a>
<p class="kboard-item-title kboard-modern-gallery-cut-strings"><a href="<?php echo $url->getDocumentURLWithUID($content->uid)?>"><?php echo $content->title?></a></p>
<p class="kboard-item-user">by <span><?php echo $content->getUserDisplay()?></span></p>
</div>
<div class="kboard-item-info">
<span class="kboard-item-info-views"><?php echo $content->view?></span>
<span class="kboard-item-info-like"><?php echo $content->vote?></span>
<span class="kboard-item-info-comments"><?php echo $content->getCommentsCount()?></span>
</div>
</li>
<?php endwhile?>
</ul>
<!-- 리스트 끝 -->
<!-- 모달창 추가 코드 시작(1) -->
<div class="kboard-gallery-document content-uid-<?php echo $content->uid?>">
<div id="kboard-document">
<div id="kboard-ocean-gallery-document">
<div class="kboard-document-wrap" itemscope itemtype="http://schema.org/Article">
<button type="button" onclick="close_pop_up()">닫기</button>
<div class="kboard-title" itemprop="name">
<p><?php echo $content->title?></p>
</div>
<div class="kboard-detail">
<?php if($content->category1):?>
<div class="detail-attr detail-category1">
<div class="detail-name"><?php echo $content->category1?></div>
</div>
<?php endif?>
<?php if($content->category2):?>
<div class="detail-attr detail-category2">
<div class="detail-name"><?php echo $content->category2?></div>
</div>
<?php endif?>
<?php if($content->option->tree_category_1):?>
<?php for($i=1; $i<=$content->getTreeCategoryDepth(); $i++):?>
<div class="detail-attr detail-tree-category-<?php echo $i?>">
<div class="detail-name"><?php echo $content->option->{'tree_category_'.$i}?></div>
</div>
<?php endfor?>
<?php endif?>
<div class="detail-attr detail-writer">
<div class="detail-name"><?php echo __('Author', 'kboard')?></div>
<div class="detail-value"><?php echo apply_filters('kboard_user_display', $content->member_display, $content->member_uid, $content->member_display, 'kboard', $boardBuilder)?></div>
</div>
<div class="detail-attr detail-date">
<div class="detail-name"><?php echo __('Date', 'kboard')?></div>
<div class="detail-value"><?php echo date("Y-m-d H:i", strtotime($content->date))?></div>
</div>
<div class="detail-attr detail-view">
<div class="detail-name"><?php echo __('Views', 'kboard')?></div>
<div class="detail-value"><?php echo $content->view?></div>
</div>
</div>
<div class="kboard-content" itemprop="description">
<div class="content-view">
<?php foreach($content->attach as $key=>$attach): $extension = strtolower(pathinfo($attach[0], PATHINFO_EXTENSION));?>
<?php if(in_array($extension, array('gif','jpg','jpeg','png'))):?>
<p class="thumbnail-area"><img src="<?php echo site_url($attach[0])?>" alt="<?php echo $attach[1]?>"></p>
<?php else: $download[$key] = $attach; endif?>
<?php endforeach?>
<?php echo $content->content?>
</div>
</div>
<div class="kboard-document-action">
<div class="left">
<button type="button" class="kboard-button-action kboard-button-like" onclick="kboard_document_like(this)" data-uid="<?php echo $content->uid?>" title="<?php echo __('Like', 'kboard')?>"><?php echo __('Like', 'kboard')?> <span class="kboard-document-like-count"><?php echo intval($content->like)?></span></button>
<button type="button" class="kboard-button-action kboard-button-unlike" onclick="kboard_document_unlike(this)" data-uid="<?php echo $content->uid?>" title="<?php echo __('Unlike', 'kboard')?>"><?php echo __('Unlike', 'kboard')?> <span class="kboard-document-unlike-count"><?php echo intval($content->unlike)?></span></button>
</div>
</div>
<?php if(isset($download) && $download): foreach($download as $key=>$value):?>
<div class="kboard-attach">
<?php echo __('Attachment', 'kboard')?> : <a href="<?php echo $url->getDownloadURLWithAttach($content->uid, $key)?>"><?php echo $content->attach->{$key}[1]?></a>
</div>
<?php endforeach; endif;?>
</div>
<?php if($content->visibleComments()):?>
<div class="kboard-comments-area"><?php echo $board->buildComment($content->uid)?></div>
<?php endif?>
<div class="kboard-control">
<div class="left">
<a href="<?php echo $url->set('mod', 'list')->toString()?>" class="kboard-ocean-gallery-button-small"><?php echo __('List', 'kboard')?></a>
<?php if($content->getPrevUID()):?>
<a href="<?php echo $url->getDocumentURLWithUID($content->getPrevUID())?>" class="kboard-ocean-gallery-button-small" onclick="kboard_gallery_document('<?php echo $content->getPrevUID()?>'); return false;"><?php echo __('Prev', 'kboard')?></a>
<?php endif?>
<?php if($content->getNextUID()):?>
<a href="<?php echo $url->getDocumentURLWithUID($content->getNextUID())?>" class="kboard-ocean-gallery-button-small" onclick="kboard_gallery_document('<?php echo $content->getNextUID()?>'); return false;"><?php echo __('Next', 'kboard')?></a>
<?php endif?>
</div>
<?php if($content->isEditor() || $board->permission_write=='all'):?>
<div class="right">
<a href="<?php echo $url->getContentEditor($content->uid)?>" class="kboard-ocean-gallery-button-small"><?php echo __('Edit', 'kboard')?></a>
<a href="<?php echo $url->getContentRemove($content->uid)?>" class="kboard-ocean-gallery-button-small" onclick="return confirm('<?php echo __('Are you sure you want to delete?', 'kboard')?>');"><?php echo __('Delete', 'kboard')?></a>
</div>
<?php endif?>
</div>
<?php if($board->contribution() && !$board->meta->always_view_list):?>
<div class="kboard-ocean-gallery-poweredby">
<a href="http://www.cosmosfarm.com/products/kboard" onclick="window.open(this.href); return false;" title="<?php echo __('KBoard is the best community software available for WordPress', 'kboard')?>">Powered by KBoard</a>
</div>
<?php endif?>
</div>
</div>
</div>
<!-- 모달창 추가 코드 끝(1) -->
<!-- 페이징 시작 -->
<div class="kboard-pagination">
<ul class="kboard-pagination-pages">
<?php echo kboard_pagination($list->page, $list->total, $list->rpp)?>
</ul>
</div>
<!-- 페이징 끝 -->
<form id="kboard-search-form" method="get" action="<?php echo esc_url($url->toString())?>">
<?php echo $url->set('pageid', '1')->set('target', '')->set('keyword', '')->set('mod', 'list')->toInput()?>
<div class="kboard-search">
<select name="target">
<option value=""><?php echo __('All', 'kboard')?></option>
<option value="title"<?php if(kboard_target() == 'title'):?> selected<?php endif?>><?php echo __('Title', 'kboard')?></option>
<option value="content"<?php if(kboard_target() == 'content'):?> selected<?php endif?>><?php echo __('Content', 'kboard')?></option>
<option value="member_display"<?php if(kboard_target() == 'member_display'):?> selected<?php endif?>><?php echo __('Author', 'kboard')?></option>
</select>
<input type="text" name="keyword" value="<?php echo kboard_keyword()?>">
<button type="submit" class="kboard-modern-gallery-button-small"><?php echo __('Search', 'kboard')?></button>
</div>
</form>
<?php if($board->isWriter()):?>
<!-- 버튼 시작 -->
<div class="kboard-control">
<a href="<?php echo esc_url($url->getContentEditor())?>" class="kboard-modern-gallery-button-small"><?php echo __('New', 'kboard')?></a>
</div>
<!-- 버튼 끝 -->
<?php endif?>
<?php if($board->contribution()):?>
<div class="kboard-modern-gallery-poweredby">
<a href="https://www.cosmosfarm.com/products/kboard" onclick="window.open(this.href);return false;" title="<?php echo __('KBoard is the best community software available for WordPress', 'kboard')?>">Powered by KBoard</a>
</div>
<?php endif?>
</div>
<!-- 모달창 추가 코드 시작(2) -->
<style>
#kboard-ocean-gallery-list .kboard-gallery-document { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); }
#kboard-ocean-gallery-list #kboard-document { margin: 10% auto; padding: 10px; width: 50%; background-color: white; border: 1px solid gray; }
</style>
<script>
function kboard_gallery_document(uid){
jQuery('.kboard-gallery-document').hide();
jQuery('.content-uid-'+uid).show();
}
function close_pop_up(){
jQuery('.kboard-gallery-document').hide();
}
</script>
<!-- 모달창 추가 코드 끝(2) -->
수정하고 나니
본래 https://imgur.com/a/4eIvCk8 이렇게 뜨던 페이지가
https://imgur.com/a/94ROLTj 처럼 뜨고, 게시글 클릭 시 팝업창으로 뜨는것은 그대로 유지되어있습니다.