简单的 jq 弹窗

将下面的文件保存成 sample_pop.php

<?php
//show age_tips  - add by dbquan
function show_age_tips(){
    define('TEXT_YES', 'YES');
    define('TEXT_NO', 'NO');
    define('AGE18_TIPS_MSG', 'These items are for adults only (18 years or older).');
    define('AGE18_TIPS_CONFIRM', 'Are you over 18?');

    $age18_tips_desc    = AGE18_TIPS_MSG;
    $age18_tips_confirm = AGE18_TIPS_CONFIRM;
    $age18_tips_yes     = TEXT_YES;
    $age18_tips_no      = TEXT_NO;

    $age_tips_str = <<< EOF
<div class='age-pop' style='z-index: 9999; position: fixed; top: 50%; left: 50%; margin-top:-4rem; margin-left:-7rem; width: 20rem; height: 10rem; border-radius: 5px; background-color: #fff; display:none;'>
    <div class='age-content' style='padding: 10px; font: bold'>
        <div>
            <div style='float:left; color:rgb(235, 97, 0); font-size:2rem; margin:30px 10px;'>?</div>
            <div style='float:left; margin-top:1rem; width:14rem' id='age18_tips_content'>
                <div style='font-size:1rem'><span>{$age18_tips_desc}</span></div>
                <div style='font-size:1.15rem; text-align:center; margin-top:1rem'><span >{$age18_tips_confirm}</span></div>
            </div>
        </div>

        <div style='text-align: center; margin-top:6.5rem'>
            <a href='javascript:;' class='button age-pop-yes' style='cursor: pointer; background: #ea6103; color: #fff; text-align: center; min-width: 86px; height: 32px; border: 0;'>$age18_tips_yes</a>
            <a href='' class='button' style='cursor: pointer; background: #7d7772; color: #fff; text-align: center; min-width: 86px; height: 32px; border: 0;'>{$age18_tips_no}</a>
        </div>
    </div>
</div>

<div class='age-pop-mask' style='z-index: 9998; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.5; filter:alpha(opacity=50); display:none'></div>
 <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    $('.age-pop-yes').click(function () {
        $('.age-pop-mask').fadeOut(100);
        $('.age-pop').fadeOut(200, setCookie('age18', 'yes'));
    })
    $('.age-pop-mask').fadeIn(100);
    $('.age-pop').fadeIn(200);
})
function setCookie(name,value){  
    var Days = 365;
    var exp  = new Date();
    exp.setTime(exp.getTime() + Days*24*60*60*1000);
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();  
}  
</script>
EOF;
    echo $age_tips_str;
}

show_age_tips();

效果如下图

age-pop.png