ประยุกต์การทำ overlay เพจ กับกล่องข้อความ ด้วย jQuery

20 December 2009 เขียนเมื่อ 15 ปีก่อน โดย Ninenik Narkdee

jquery overlay กล่องข้อความ

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

ดูแล้ว 16,254 ครั้ง

css code สำหรับกล่องข้อความ จัดรูปแบบตามต้องการ

<style type="text/css">
div.alertBox{
    border:5px solid #33CC00;
    background-color:#F5FEED;
    width:300px;
    margin:auto;
    height:75px;
    text-align:center;
    font-size:12px;
}
</style>

HTML ปุ่ม สำหรับตัวอย่าง code

1	`<input` `type="button"` `name="btAddOverlay"` `id="btAddOverlay"` `value="ตัวอย่างคลิก"` `/>`

javascript code

<script src="http://www.google.com/jsapi" type="text/javascript"></script>     
<script type="text/javascript">     
google.load("jquery", "1.3.2");     
</script> 
<script type="text/javascript">
$(function(){
    var OverlayObj="<div class='overlay'><div class='alertBox'></div></div>";
    $("#btAddOverlay").click(function(){
        $(document.body).prepend(OverlayObj);
        $("div.overlay").css({
                position:"absolute",  
                top:0,
                left: 0,   
                background:"#000",   
                width:"100%", 
                height:$(document).height(),   
                opacity:.7          
        });
        $("div.alertBox").animate({
            marginTop:150
        },500).html("<br>จัดรูปแบบกล่องข้อความ นี้ใน css class<br>Click to close");
        $("div.alertBox").bind('click',function(){
            $("div.overlay").fadeOut("fast");
        });     
    });
});
</script>

ตัวอย่างคลิก ตัวอย่าง

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