그누보드 - [팬텀디자인] 팝업 레이어 드래그 & 레이아웃 수정

[팬텀디자인] 팝업 레이어 드래그 & 레이아웃 수정 > 그누보드5 팁자료실

그누보드5 팁자료실

[팬텀디자인] 팝업 레이어 드래그 & 레이아웃 수정 정보

[팬텀디자인] 팝업 레이어 드래그 & 레이아웃 수정

본문

팝업 적용 예시

그누보드 기본 팝업이 너무 심심해서 레이아웃을 간단하게 변경해봤습니다.

* 드래그는 마스타님의 tip을 참고했습니다. (링크2)

/bbs/newwin.inc.php 파일

* 전체 코드 가져다가 쓰셔도 되고, 따로 수정이 되어있으신 분들은 아래에 주석처리된 부분만 가져가서 추가하시면 됩니다.


<?php
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
$sql = " select * from {$g5['new_win_table']}
          where '".G5_TIME_YMDHIS."' between nw_begin_time and nw_end_time
            and nw_device IN ( 'both', 'pc' )
          order by nw_id asc ";
$result = sql_query($sql, false);
?>
 
<!-- 추가된 코드 시작 -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".hd_pops").draggable();
    });
</script>
<!-- 추가된 코드 종료 -->

<!-- 팝업레이어 시작 { -->
<div id="hd_pop">
    <h2>팝업레이어 알림</h2>
<?php
for ($i=0; $nw=sql_fetch_array($result); $i++)
{
    // 이미 체크 되었다면 Continue
    if ($_COOKIE["hd_pops_{$nw['nw_id']}"])
        continue;
?>
    <div id="hd_pops_<?php echo $nw['nw_id'] ?>" class="hd_pops" style="top:<?php echo $nw['nw_top']?>px;left:<?php echo $nw['nw_left']?>px">
        <div class="hd_pops_con" style="width:<?php echo $nw['nw_width'] ?>px;height:<?php echo $nw['nw_height'] ?>px">
            <?php echo conv_content($nw['nw_content'], 1); ?>
        </div>
        <div class="hd_pops_footer">
            <button class="hd_pops_reject hd_pops_<?php echo $nw['nw_id']; ?> <?php echo $nw['nw_disable_hours']; ?>"><i class="fa fa-ban font-13"></i> <strong><?php echo $nw['nw_disable_hours']; ?></strong>시간 동안 다시 열람하지 않습니다.</button>
            <button class="hd_pops_close hd_pops_<?php echo $nw['nw_id']; ?>">×</button>
            <!-- [닫기]를 X로 변경하였습니다~ -->
        </div>
    </div>
<?php }
if ($i == 0) echo '<span class="sound_only">팝업레이어 알림이 없습니다.</span>';
?>
</div>
<script>
$(function() {
    $(".hd_pops_reject").click(function() {
        var id = $(this).attr('class').split(' ');
        var ck_name = id[1];
        var exp_time = parseInt(id[2]);
        $("#"+id[1]).css("display", "none");
        set_cookie(ck_name, 1, exp_time, g5_cookie_domain);
    });
    $('.hd_pops_close').click(function() {
        var idb = $(this).attr('class').split(' ');
        $('#'+idb[1]).css('display','none');
    });
    $("#hd").css("z-index", 1000);
});
</script>
<!-- } 팝업레이어 끝 -->

/theme/basic/css/default.css 파일에서

아래 코드를 찾아서 수정 및 추가


.hd_pops_footer button {font-weight:350; transition:0.3s ease all; margin:5px; padding:10px;border:0;color:#ccc} /* 수정되는 코드 */
.hd_pops_footer button:hover { color:#fff; transition:0.3s ease all; } /* 추가되는 코드 */
.hd_pops_footer .hd_pops_reject {background:#444;text-align:left;} /* 수정되는 코드 */

많은 도움 되셨으면 좋겠습니다.