div 불투명 깔기 . 소스

2012. 6. 8. 18:19

<script type="text/javascript">
        // [ by Park. ] AlphaLayer Object Function
        alpha = new Object
        alpha = {
            clear  : function() { 
                        alpha.create().style.display = "none"
                        document.getElementsByTagName('HTML')[0].style.overflow = "";
                },
            apply  : function(co,op) {
                        var Alpha = alpha.create()
                        var alphacolor = co ? co : "#ffffff"
                        var opacity = op ? op : "50"
                        document.getElementsByTagName('HTML')[0].style.overflow = "hidden";
                        with (Alpha.style) {
                            width      = document.body.scrollWidth + "px";
                            height     = document.body.scrollHeight + "px";
                            background = alphacolor;
                            filter     = "alpha(opacity=" + opacity + ")";
                            opacity    = op / 100;
                            display    = "block";
                        }
                },
            create : function() {
                        if (!document.getElementById('alpha')) {
                            var alphaDiv = document.createElement('div');
                            alphaDiv.setAttribute('id', 'alpha');
                            with(alphaDiv.style) {
                                display  = "none";
                                position = "absolute";
                                top      = "0";
                                left     = "0";
                                zindex   = "90";
                            }
                            document.body.appendChild(alphaDiv)
                            window.onresize = alpha.resize
                        }
                        return document.getElementById('alpha')
                },
            resize : function() {
                        var Alpha = alpha.create()
                        with (Alpha.style) {
                            width      = document.body.scrollWidth + "px";
                            height     = document.body.scrollHeight + "px";
                        }
                }
        }
    </script>

사용방법
- 알파레이어 온 : alpha.apply('색상','투명도') [ 색상 및 투명도 미지정시 디폴트는 흰색에 50% 입니다 예) alpha.apply() ]
- 알파레이어 오프 : alpha.clear()

+++ 추가

HTML 반투명 Layer 생성

<html>

<head>

<title>Layer Test</title>

var newArticleDivId = "write_article_layer";

var newArticleUrl = "http://www.naver.com/";

var minimumMargine = 50;

var maximumWidth = 800;

* openLayeredDialog

* 레이어에 떠 있는 iFrame을 웹 페이지에 표시한다.

function openLayeredDialog() {

// 배경이 되는 반투명 레이어를 생성한다.

var div1 = document.createElement("DIV");

div1.id = newArticleUrl;

div1.onclick = function () {closeLayeredDialog(false);};

div1.style.position = "absolute";

div1.style.height = "100%";

div1.style.width = "100%";

div1.style.top = "0";

div1.style.left = "0";

div1.style.background = "#000000";

div1.style.opacity = "0.6";

div1.style.filter = "alpha(opacity=60)";

// iFrame을 담는 레이어를 생성한다.

var div2 = document.createElement("DIV");

div2.id = newArticleDivId + "_inner";

div2.style.position = "absolute";

div2.style.background = "#ffffff";

// iFrame을 생성한다.

var iframe1 = document.createElement("IFRAME");

iframe1.src = newArticleUrl;

iframe1.frameborder = "0";

iframe1.style.height = "100%";

iframe1.style.width = "100%";

// 앞서 생성한 Element들을 웹 페이지에 추가한다.

div2.appendChild(iframe1);

document.body.appendChild(div1);

document.body.appendChild(div2);

// 레이어의 크기를 조정한다.

adjustmentLayeredDialog();

// 웹브라우저의 크기를 조절할 때 발생하는 이벤트의 핸들러를 등록한다.

window.onresize = function(event) {adjustmentLayeredDialog();};

}

* closeLayeredDialog

* 레이어를 제거한다.

* 인자 normalClose가 true라면 Confirm 대화 창을 표시한다.

* 인자 normalClose가 false라면 Confirm 대화 창을 표시하지 않는다.

function closeLayeredDialog(normalClose) {

// Confirm 대화 창을 표시한다.

if (!normalClose) {

willClose = confirm("이 페이지에서 나가면 작성하던 내용들은 저장되지 않습니다.\n정말 나가겠습니까?");

} else {

willClose = true;

}

// 레이어를 제거한다.

if (willClose) {

var child_background = document.getElementById(newArticleDivId);

var child_inner = document.getElementById(newArticleDivId + "_inner");

if (child_background) {

document.body.removeChild(child_background);

}

if (child_inner) {

document.body.removeChild(child_inner);

}

// 레이어를 제거하며 웹브라우저의 크기를 조절할 때 발생하는 이벤트의 핸들러도 제거한다.

window.onresize = null;

}

* adjustmentLayeredDialog

* 레이어를 크기와 위치를 조정한다.

function adjustmentLayeredDialog() {

var child_inner = document.getElementById(newArticleDivId + "_inner");

if (child_inner) {

var clientHeight = document.body.clientHeight;

var clientWidth = document.body.clientWidth;

var top = minimumMargine;
var left = 0;

var height = clientHeight - minimumMargine * 2;

var width = clientWidth - minimumMargine * 2;

if (width > maximumWidth) {

width = maximumWidth;

}

left = (clientWidth - width) / 2;

child_inner.style.height = height;

child_inner.style.width = width;

child_inner.style.top = top;

child_inner.style.left = left;

}

</script>

</head>

<body>

</body>

</html>

저작자표시

'HTML5.0' 카테고리의 다른 글

windy 실시간 기상 영상 (0)	2019.10.09
HTML --> PDF 파일로 변환 하기 . 펌) 정윤재님 노트 (0)	2013.04.05
html animation (0)	2012.06.08
div의 overflow 및 postion (0)	2012.06.07
캔버스 위에 div 를 올리자. (0)	2012.06.05