Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style type="text/css">
        #message1 {
            text-align: center;
            vertical-align: middle;
            color: #ffffff;
            background-color: #ff0000;
            width: 100px;
            height: 50px;
            position: absolute;
            top: 0px;
            left: 0px;
        }
    </style>
</head>
<body>
​
    這些是一些文字<br>這些是一些文字<br>這些是一些文字<br>
    <button>其他元件</button>
    <div id="message1">
        看點廣告吧！<br><br>
        <button id="confirm">確定</button>
    </div>
​
<script type="text/javascript">
​
    function style(elem, prop) {
        return window.getComputedStyle(elem, null)[prop];
    }
    
    // value 未指定時，用來取得不透明度
    function opacity(elem, value) {
        if(value === undefined) { 
            let opt = style(elem, 'opacity');
            return opt === '' ? 1 : parseFloat(opt);
        } else {
            elem.style.opacity = value;
        }
    }
    
    class Dimension {
        static screen() {
            return {
                width: screen.width,
                height: screen.height
            };
        }
        
        static screenAvail() {
            return {
                width: screen.availWidth,
                height: screen.availHeight
            };        
        }
        
        static browser() {
            return {
                width: window.outerWidth,
                height: window.outerHeight
            };
        }
        
        static html() {
            return {
                width: window.documentElement.scrollWidth,
                height: window.documentElement.scrollHeight
            };        
        }
        
        static body() {
            return {
                width: window.body.scrollWidth,
                height: window.body.scrollHeight
            };        
        }
        
        static viewport() {
            return {
                width: window.innerWidth,
                height: window.innerHeight
            };        
        }
    }
    
    class Coordinate {
        static browser() {
            return {
                x: window.screenX,
                y: window.screenY
            };                
        }
        
        static scroll() {
            return {
                x: window.pageXOffset,
                y: window.pageYOffset
            };        
        }
    }
    
    let message1 = document.getElementById('message1');
    opacity(message1, 0.5);
    
    let {width, height} = Dimension.viewport();
    
    message1.style.width = `${width}px`;
    message1.style.paddingTop = `${height / 2}px`;
    message1.style.height = `${height / 2}px`;
    
    document.getElementById('confirm').onclick = function() {
        message1.style.width = '0px';
        message1.style.height = '0px';
        message1.style.paddingTop = '0px';
        message1.style.display = 'none';
    };
    
</script>
​
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
JustinSDKpro
0viewers