jquery实现简单实用的弹出层效果代码

本文实例讲述了jquery实现简单实用的弹出层效果。分享给大家供大家参考。具体如下：

目前来说，我还是喜欢这个自己改造的弹出层，在项目中用的也是这个。引入了新版的jquery插件，方框及文字都可以自己定义，非常方便，希望大家也喜欢这款弹出层，JavaScript在本例中也充分发挥了作用，对学习射流研究…也是不错的参考。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-simple-alert-style-demo/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML '标题弹出层/title脚本src=' http : jquery-1。6 .2 .量滴js ' type=' text/JavaScript '/脚本样式。black _ overlay { display : none；绝对位置：前：名0%；左侧： 0%;宽度： 100%;高度： 100%;背景-颜色：黑色；z索引：1001;-莫兹-奥帕市3360 0.8；opa city 3360.80 filter : alpha(不透明度=80);}.white _ content { display : none；绝对位置：前：名10%；左侧： 10%;宽度： 80%;高度： 80%;border: 16px固体浅蓝色；背景-颜色：白色；z索引：1002;飞越：汽车；}.white _ content _ small { display : none；绝对位置：前：名20%；左： 30%;宽度： 40%;高度： 50%;border: 16px固体浅蓝色；背景-颜色：白色；z索引：1002;飞越：汽车；}/style脚本类型=' text/JavaScript '//弹出隐藏层函数ShowDiv(show_div，BG _ div){文档。getelementbyid(show _ div)。风格。display=' block文件。getelementbyid(BG _ div。风格。display=' blockvar bgdiv=文档。getelementbyid(BG _ div)；bgdiv。风格。宽度=文档。尸体。scrollwidth//bgdiv.style.height=$(文档)。高度();$("#"BG _ div).高度($(文档)。高度());};//关闭弹出层函数CloseDiv(show_div，BG _ div){文档。getelementbyid(show _ div)。风格。显示='无'；文件。getelementbyid(BG _ div。风格。显示='无'；};/script/head dyinput id=' button 1 ' type=' button ' value='点击弹出层onclick=' ShowDiv '(' MyDiv '，' fade ')/！-弹出层时背景层DIV-DIV id=' fade ' class=' black _ overlay '/DIV DIV id=' myDIV ' class=' white _ content ' DIV style=' text-align : right；光标：默认值；height : 40px ' span style=' font-size : 16px；onclick=' CloseDiv '(' MyDiv '，' fade ')关闭/span /div目前来说，我还是喜欢这个自己改造的弹出层。自己在项目中也用的是这个/div/body/html希望本文所述对大家的jquery程序设计有所帮助。