ถามเรื่อง jquery overlay หน่อยครับ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ถามเรื่อง jquery overlay หน่อยครับ

ถามเรื่อง jquery overlay หน่อยครับ

พีดีลองนำไปใช้งานจะใส่ภาพแสดงเป็น box แต่เจอปัญหาคือว่า ภาพมันจางไปเลยครับ คืออยากให้ตรงรูปภาพมันไม่จางอ่ะครับนี้คือคำสั่งที่ดัดแปลงเล็กน้อยครับไม่รู้ว่าถูกหรือเปล่า

$(function(){

var OverlayObj="<div class='overlay'><div class='alertBox'></div></div>";

$("#btAddOverlay").ready(function(){

$(document.body).prepend(OverlayObj);

$("div.overlay").css({

position:"absolute",

top:0,

left: 0,

background:"#000",

width:"100%",

height:$(document).height(),

opacity:.8

});

$("div.alertBox").animate({

marginTop:250

},500).html("<img src='images/iconweb/banner-promotion.jpg'>)");

$("div.alertBox").bind('click',function(){

$("div.overlay").fadeOut("fast");

});

พอลองปรับค่า opacity:.8 ดูมันนี้ถ้ามากไปขอบด้านนอกก็มืดเกินไปก็เลยไม่รู้ว่าจะปรับตรงไหนครับช่วยชี้แนะทีครับ

Cpuhost 29-05-2010 15:40:43

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

จากตัวอย่าง ตามลิ้งค์ด้านล่าง น่าจะมีปัญหา เกี่ยวกับ การแสดงข้อมูลภายใน overlay

https://www.ninenik.com/ประยุกต์การทำ_overlay_เพจ_กับกล่องข้อความ_ด้วย_jQuery-246.html

ให้ปรับตามนี้ดู

CSS Code ตัวอย่าง

<style type="text/css">
div.alertBox{
    border:5px solid #33CC00;
    background-color:#F5FEED;
    width:300px;
    text-align:center;
    margin:auto;
    position:fixed;
    z-index:1000;   
}
</style>

HTML Code ตัวอย่าง

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

jQuery Code ตัวอย่าง

<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
    var OverlayObj="<div class='alertBox'></div><div class='overlay'></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").css("left",($(window).width()*0.5)-($("div.alertBox").width()*0.5))
        .animate({
            marginTop:150
        },500).html("<img src=https://www.ninenik.com/demo/images/sample_banner01.jpg />");
        $("div.alertBox").bind('click',function(){
            $("div.overlay").fadeOut("fast");
            $(this).fadeOut("fast");
        });     
    });
});
</script>