สร้างกล่องแจ้งข้อความ คล้าย MSN ด้วย jQuery

01 February 2009 เขียนเมื่อ 16 ปีก่อน โดย Ninenik Narkdee

ข้อความ jquery msn

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ข้อความ jquery msn

ดูแล้ว 15,130 ครั้ง

<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function(){
    $("div#popupbox").click(function(){ // สำหรับคลิกเพื่อปิด
        $(this).hide();
    });
    var IDPop=setTimeout("iPopUp()",3000); // กำหนดให้แสดงหลัง 3 วินาที
    $(window).resize(function(){ // กรณีมีการกำหนดขนาดหน้าต่างบราวเซอร์
        var popup_y=$(window).height()-$("div#popupbox").height()-3;
        var popup_x=$(window).width()-$("div#popupbox").width()-3;      
        $("div#popupbox").css({
            top:popup_y,
            left:popup_x
        });
    });
});
function iPopUp(){ // ฟังก์ชันแสดง popup
    var popup_y=$(window).height()-$("div#popupbox").height()-3;
    var popup_x=$(window).width()-$("div#popupbox").width()-3;      
    $("span").html(popup_x+"  "+popup_y);
    $("div#popupbox").css({
        top:popup_y,
        left:popup_x
    });
    $("div#popupbox").show();
    setTimeout("iPopUpHide()",5000); // กำหนดให้ปิดเองภายใน 5 วินาที
}
function iPopUpHide(){
    $("div#popupbox").hide();
}
</script>
<style type="text/css">
div#popupbox{
    width:175px;
    font-size:12px;
    color:#336699;
    height:120px;
    background:url(images/bg_popup.gif) no-repeat left top;
    position:fixed;
    display:none;
    text-align:center;
    cursor:pointer;
}   
</style>
<div id="popupbox">
<br />
<br />
<br />
<p>สวัสดีครับ</p>
</div>

สามารถนำไปประยุกต์ใช้งานได้

กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ