本文实例为大家分享了射流研究…自定义弹出窗口效果展示的具体代码，供大家参考，具体内容如下

效果图：

源码：

1.demo.jsp

"%@"页面内容类型=' text/html；charset=UTF-8 "语言="Java"% html标题自定义弹出窗口/title脚本类型=' text/JAVAScript ' src=' http : js/mylayer。js /脚本样式类型=' text/CSS '按钮{ width : 50px高度： 50pxborder: 1px纯蓝；背景-颜色：蓝色；颜色：红色；边界半径： 5px-网络套件-盒子-阴影： 2px 2px 2px灰色；-moz-box-shadow: 2px 2px 2px灰色；box-shadow: 2px 2px 2px灰色；}按钮：悬停{背景色：绿色；光标：指针；}/style script type=' text/JavaScript ' function openWindow(){ new MyLayer({ top : ' 10% '，left:'10% '，width:'80% '，height:'80% '，title: '我的标题，content: '操作成功' }).openLayer()；}/script/head body button type=' button ' onclick=' openWindow()'打开弹窗/button/body/html 2.myLayer.js

/** *朱文琪2017/6/16创作。*//* * * @参数选项弹窗基本配置信息* @构造函数构造方法*/函数MyLayer(选项){ this。选项=选项；}/** * 打开弹窗*/mylayer。原型。open layer=function(){ var background _ layer=document。创建元素(' div ')；背景层。风格。显示='无'；背景层。风格。位置='绝对；背景层。风格。top=' 0px背景层。风格。left=" 0px背景层。风格。宽度=' 100% '；背景层。风格。高度=' 100% '；背景层。风格。背景颜色='灰色'；背景层。风格。zindex=' 1001背景_layer.style。不透明度=' 0.8 ';var open _ layer=文档。创建元素(' div ')；open _ layer。风格。display=" noneopen_layer.style.position='绝对；open _ layer。风格。top=这个。选项。top===未定义？10% ' :这个。选项。顶部；open _ layer。风格。左=这个。选项。left===未定义？10% ' :这个。选项。向左；open _ layer。风格。宽度=这个。选项。width===未定义？80% ' :这个。选项。宽度；open _ layer。风格。高度=这个。选项。高度===未定义？80% ' :这个。选项。身高；open_layer.style.border='1px纯浅蓝色；open _ layer。风格。borderradius=' 15pxopen _ layer。风格。BoxShadow=' 4px 4px 10px # 171414open _ layer。风格。背景颜色='白色'；open _ layer。风格。zindex=' 1002open _ layer。风格。溢出=' autovar div _ Tooll=文档。create element(' div ')；div _ Tooll。风格。textalign=' rightdiv _ Tooll。风格。填充ToP=' 10pxdiv _ Tooll。风格。背景颜色=' alicebluediv _ Tooll。风格。高度=' 40pxvar span _ title=文档。创建元素(“span”)；span _ title。风格。font size=' 18pxspan _ title。风格。颜色='蓝色'；span _ title。风格。float=' leftspan _ title。风格。左边距=' 20pxvar span _ title _ content=document。createtextnode(这。选项。title===未定义？这个。选项。标题)；span _ title。append child(span _ title _ content)；div _ Tooll。追加子项(span _ title)；var span _ close=文档。创建元素(“span”)；跨度_关闭。风格。font size=' 16px跨度_关闭。风格。颜色='蓝色'；跨度_关闭。风格。光标='指针'；跨度_关闭。风格。右边距=' 20px跨度_关闭。onclick=function(){ open _ layer。风格。显示='无'；背景层。风格。显示='无'；};var span _ close _ content=document。createtextnode('关闭');跨度_关闭。append child(span _ close _ content)；div _ Tooll。追加子项(span _ close)；open _ layer。append child(div _ Tooll)；var div _ content=文档。创建元素(' div ')；div _内容。风格。textalign=“居中”；var content _ area=文档。createtextnode(这。选项。内容===未定义？这个。选项。内容)；div _内容。appendchild(content _ area)；open _ layer。append child(div _ content)；文件。尸体。append child(open _ layer)；文件。尸体。appendchild(background _ layer)；open _ layer。风格。display=' block背景层。风格。display=' block};以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。