首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

jQuery之弹出层(用以提示)

2012-08-30 
jQuery之弹出层(用于提示)参考了权威指南的部分代码 实现效果:单击按钮显示层,在单击就隐藏层,层上点击后

jQuery之弹出层(用于提示)
参考了权威指南的部分代码
实现效果:单击按钮显示层,在单击就隐藏层,层上点击后隐藏层,页面单击后隐藏层,用于常见的提示
使用版本:jQuery 1.6.2
jQuery代码如下:

<script type="text/javascript" >    $(function()        {           //动画速度            var speed = 500;            //是否显示或者隐藏层的标记            var tag = 0;                                    $("#btnShow").click(function(event){                    //取消事件冒泡                event.stopPropagation();                if(tag == 1){                tag = 0;                $("#divPop").hide(speed);                 }else{                    tag = 1;                //设置弹出层位置                var offset = $(event.target).offset();                $("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left });//动画显示                   $("#divPop").show(speed);                   }});            //单击空白区域隐藏弹出层            $(document).click(function(event) {                          $("#divPop").hide(speed);            tag = 0;            });            //单击弹出层则自身隐藏            $("#divPop").click(function(event) {                           $("#divPop").hide(speed);             tag = 0;            });        })</script>

页面代码如下:
<div>                   <button id="btnShow" style="margin-top: 200px;margin-left: 300px">显示提示文字</button>    </div>            <!-- 弹出层 -->    <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: absolute; display:none;width: 300px; height: 100px;">        <div style="text-align: center;">弹出层</div>    </div>        

热点排行