燈箱效果：僅使用Javascript將主體顯示為灰色

Question

[學習目的]

我正在嘗試為此僅使用javascript。
用最簡單的方法提出的任何建議都非常感謝。
我已經用注釋解釋了我在按鈕功能中需要做的事情。

PS：我不確定這是否使用CSS完成。所以請指導我。

好像我被誤解了，我正在尋找這種效果： http : //lokeshdhakar.com/projects/lightbox2/

<!DOCTYPE html>
<html>
<head>
<style>#mydiv{height: 250px; width: 250px; background-color:#34f;}</style>
    <script>

        document.onreadystatechange = function()
        {
            if(document.readyState == "complete")
            {
                var div        =   document.getElementById("mydiv");    
                var mybutton   =   document.getElementById("mybutton");

                mybutton.onclick = function()
                {
                    // center div
                    // gray out the rest 

                };

                document.onclick = function()
                {
                    // remove gray out effect to the page 
                };

            }
        } 

    </script>
</head>
<body>
<div id="mydiv"></div>
<button id="mybutton"></button>
</body>
</html>

Answer 1

HTML：

<div id="mydiv" style="display:none"></div>

CSS：

#mydiv
{
    background-color: white;
    filter:alpha(opacity=50); /* IE */
    opacity: 0.5; /* Safari, Opera */
    -moz-opacity:0.50; /* FireFox */
    top: 0px;
    left: 0px;
    z-index: 20;
    height: 100%;
    width: 100%;
    background-repeat:no-repeat;
    background-position:center;
    position:absolute;
}

JavaScript：

mybutton.onclick = function()
{
    document.getElementById("mydiv").style.display = "";
};

document.onclick = function()
{
    document.getElementById("mydiv").style.display = "none";
};

可能會幫助您。

燈箱效果：僅使用Javascript將主體顯示為灰色

問題描述

1 個解決方案

解決方案1
3

燈箱效果：僅使用Javascript將主體顯示為灰色

問題描述

1 個解決方案

解決方案1 3

解決方案1
3