코스모스팜 스레드

게시글을 모달형식으로

안녕하세요.
워드프레스 게시판 케이보드 사용중입니다.
https://www.cosmosfarm.com/threads/document/27554
이 게시글을 참고하여 팝업창으로 하는건 성공했는데,
저희가 원하는 방향이랑 달라서
댓글에 기재되어있는 모달창 형식으로 바꾸려고 하니 잘 안되서 문의글 올립니다.
사용중인 테마는 모던갤러리스킨입니다.
ngng (104 Point)ㆍ2021.09.17 10:12ㆍ조회 2274ㆍ RSS
추천 0 비추천
ngng (104 Point)ㆍ2021.09.17 15:42
답변감사합니다.
첨부해주신 링크를 보고참고하여 아래의 코드로 변경하였습니다.
<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 처럼 뜨고, 게시글 클릭 시 팝업창으로 뜨는것은 그대로 유지되어있습니다.
코스모스팜 스레드

게시글을 모달형식으로

스토어인기제품 더보기

커뮤니티새로운 글 더보기
