jquery 이용한 modal 폼 - 배경 까만색 창 띄우기 > jquery

• 목록

<style>
/* 상자 */
#div_phone_bg {
    position:absolute;top:0;left:0;display:;
    width:100%;height:100%;
    background:rgba(0,0,0,0.8);
}
#div_phone {
    position: fixed;
    width:500px;
    background:#FFF;border:1px solid #333;
}
#div_phone .title {
    padding:10px;
    color:#FFF;font-size:16px;font-weight:bold;
    background:#333;
}
#div_phone .body {line-height:35px;text-align:center;padding:50px 0px;}
#div_phone .body1 {font-size:20px;font-weight:bold;}
#div_phone .body2 {font-size:20px;font-weight:bold;color:#00C73C;}
#div_phone .body3 {font-size:14px;}
#div_phone .footer {
    padding:20px 0px;
    text-align:center;
    border-top:1px solid #CCC;
}
#div_phone .footer input {
    padding:5px 10px;
    color:#FFF;font-size:16px;font-weight:bold;
    background:#333;border:1px solid #CCC;
}
/* 상자 */
</style>

<script>
$(document).ready(function (e) {
    $(document).click(function (e) {
        func_phone_hide();
    });
});

function func_phone_hide() {
    $("#div_phone_bg").hide();
}

function func_phone() {
    //$("#div_phone").toggle();

    w = $(document).width() / 2 - 250;
    h = $(document).height();
    h2 = $(window).height() / 2 - 200;

    $("#div_phone_bg").css("height", (h+"px"));
    $("#div_phone_bg").fadeIn();

    $("#div_phone").css("left", (w+"px"));
    $("#div_phone").css("top", (h2+"px"));
}
</script>



<div id="div_phone_bg">
    <div id="div_phone">
        <div class="title">전화번호</div>
        <div class="body">
            <div class="body1"><?=$config['cf_title'];?></div>
            <div class="body2">010-1234-1234</div>
            <div class="body3">전화연결은 모바일에서 가능합니다.</div>
        </div>
        <div class="footer">
            <input type="button" name="btn_phone_ok" id="btn_phone_ok" value="  확인  " onclick="func_phone();" />
        </div>
    </div>
</div>