To be or not to be.That is a question!

---源于莎士比亚的《哈姆雷特》

导航

YUI3 弹出层

demo：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://yui.yahooapis.com/3.10.0/build/yui/yui-min.js"></script>
    <style type="text/css">
    .yui3-overlay-content{
        padding: 2px;
        border: solid 1px #000;
        border-radius: 6px;
        background-color: #afa;
    }
    </style>
</head>
<body>
    <button id="show">Show Overlay</button>
    <button id="hide">Hide Overlay</button>
    <script type="text/javascript">
        YUI().use('node-base',function(Y){
            var overlay;
            var showOverlay=function(){
                Y.use('overlay',function(){
                    overlay=new Y.Overlay({
                        bodyContent:'hello',
                        centered:true,
                        height:100,
                        render:true,
                        visible:false,
                        width:200,
                        zIndex:2
                    });
                    showOverlay=function(){
                        overlay.show();
                    }
                    showOverlay();
                });
            };
            Y.one('#hide').on('click',function(){
                if(overlay){
                    overlay.hide();
                }
            });
            Y.one('#show').on('click',function(){
                showOverlay();
            })
        })
    </script>
</body>
</html>

 

posted on 2013-04-29 21:54  Ijavascript  阅读(207)  评论(0)  编辑  收藏  举报