最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jQuery实现简单弹窗遮罩效果
时间:2017-05-05 编辑:简简单单 来源:一聚教程网
效果图:
图(1)初始图
图(2)点击按钮后
代码如下:
代码如下 | 复制代码 |
#mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; background: #666; opacity: 0.5; filter: alpha(opacity=50)-moz-opacity: 0.5; display: none; } .popup { position: absolute; left: 50%; width: 600px; height: 200px; background: #fff; z-index: 1000; border: 1px solid #333; display: none; } .btn_close { position: absolute; top: 5px; right: 5px; }
$(function() { $('.btn_show').click(function() { $('#mask').css({ display: 'block', height: $(document).height() }) var $Popup = $('.popup'); $Popup.css({ left: ($('body').width() - $Popup.width()) / 2+ 'px', top: ($(window).height() - $Popup.height()) / 2 + $(window).scrollTop() + 'px', display: 'block' }) }) $('.btn_close').click(function() { $('#mask,.popup').css('display', 'none'); }) })
|
相关文章
- jQuery实现的简单拖动层示例 04-26
- 基于jQuery实现简单人工智能聊天室 03-27
- 基于jQuery实现咖啡订单管理简单应用 03-27
- jquery echarts简单例子 11-18
- jQuery中animate方法简单用法 05-11
- jQuery 克隆对象的简单示例 11-23