게시글을 모달형식으로

안녕하세요.
워드프레스 게시판 케이보드 사용중입니다.

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 처럼 뜨고, 게시글 클릭 시 팝업창으로 뜨는것은 그대로 유지되어있습니다.

     

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기