模拟一个弹出层
2016-06-01 11:04
246 查看
今天网上找了一些资料,模仿做了一个alert();
alert弹出的东西不支持复制,在实际项目中,有时弹出信息用户需要立马将他们全部记下来,稍微的快捷方式就是将弹出信息复制下来,所以为了方便用户吧,模拟了一个弹窗,样子丑了点!
View Code
最终测试弹出样子为以下,不忍直视:::::::::::::
![](https://images2015.cnblogs.com/blog/642266/201606/642266-20160601110217321-1796941639.jpg)
![](https://images2015.cnblogs.com/blog/642266/201606/642266-20160601110256649-985346301.gif)
粗来吧!
![](https://images2015.cnblogs.com/blog/642266/201606/642266-20160601110224961-1478102182.gif)
![](https://images2015.cnblogs.com/blog/642266/201606/642266-20160601110130602-818850547.png)
tips
alert弹出的东西不支持复制,在实际项目中,有时弹出信息用户需要立马将他们全部记下来,稍微的快捷方式就是将弹出信息复制下来,所以为了方便用户吧,模拟了一个弹窗,样子丑了点!
function sAlert(str){ var msgw,msgh,bordercolor; msgw=400;//提示窗口的宽度 msgh=200;//提示窗口的高度 titleheight=25 //提示窗口标题高度 bordercolor="#DDDDDD";//提示窗口的边框颜色 // titlecolor="#99CCFF";//提示窗口的标题颜色 var sWidth,sHeight; sWidth=document.body.offsetWidth; sHeight=screen.height; var bgObj=document.createElement("div"); bgObj.setAttribute('id','bgDiv'); bgObj.style.position="absolute"; bgObj.style.top="0"; bgObj.style.background="#777"; bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75"; bgObj.style.opacity="0.6"; bgObj.style.left="0"; bgObj.style.width=sWidth + "px"; bgObj.style.height=sHeight + "px"; bgObj.style.zIndex = "10000"; document.body.appendChild(bgObj); var msgObj=document.createElement("div") msgObj.setAttribute("id","msgDiv"); msgObj.setAttribute("align","center"); msgObj.style.background="white"; msgObj.style.border="1px solid " + bordercolor; msgObj.style.position = "absolute"; msgObj.style.left = "50%"; msgObj.style.top = "50%"; msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif"; msgObj.style.marginLeft = "-225px" ; msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px"; msgObj.style.width = msgw + "px"; msgObj.style.height =msgh + "px"; msgObj.style.textAlign = "center"; msgObj.style.lineHeight ="25px"; msgObj.style.zIndex = "10001"; // msgObj.style.word-wrap = "break-word"; msgObj.style.overflowY="scroll"; var title=document.createElement("h2"); title.setAttribute("id","msgTitle"); title.setAttribute("align","right"); title.style.margin="0"; title.style.padding="3px"; title.style.background=bordercolor; title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);"; title.style.opacity="0.75"; title.style.border="1px solid " + bordercolor; title.style.height="18px"; title.style.font="13px Verdana, Geneva, Arial, Helvetica, sans-serif"; title.style.color="#000000"; title.style.cursor="pointer"; title.innerHTML="关闭"; title.onclick=function(){ document.body.removeChild(bgObj); document.getElementById("msgDiv").removeChild(title); document.body.removeChild(msgObj); } document.body.appendChild(msgObj); document.getElementById("msgDiv").appendChild(title); var txt=document.createElement("p"); // txt.style.margin="1em 0" txt.setAttribute("id","msgTxt"); txt.style.fontSize = "13px"; txt.innerHTML = "注意:导入成功,不存在一下联系人手机号码:"+str; // txt.style.overflowY="scroll"; document.getElementById("msgDiv").appendChild(txt); }
View Code
最终测试弹出样子为以下,不忍直视:::::::::::::
![](https://images2015.cnblogs.com/blog/642266/201606/642266-20160601110217321-1796941639.jpg)
![](https://images2015.cnblogs.com/blog/642266/201606/642266-20160601110256649-985346301.gif)
粗来吧!
![](https://images2015.cnblogs.com/blog/642266/201606/642266-20160601110224961-1478102182.gif)
![](https://images2015.cnblogs.com/blog/642266/201606/642266-20160601110130602-818850547.png)
tips
相关文章推荐
- 详细介绍java中的数据结构
- SQL Server 快捷键备忘
- MyEclipse 快捷键
- 利用Java的MyBatis框架获取MySQL中插入记录时的自增主键
- SQLServer XML 解析
- 去掉字符序列左边和右边的空格 trim()
- QuickWebApi:使用Lambada方式,完成对WebApi的开发和调用。
- 0601 新的冲刺
- 通过setContentView设置activity的不同样式
- node.js npm mysql 相关
- 基于pinctrl 和 devcice tree的SOC GPIO 使用
- volatile关键字解析
- dataTable转list C# asp.net
- git切换新的仓库地址
- IP地址,子网掩码,默认网关和DNS
- MetalSeed 's 网站收藏夹
- python中函数默认值使用注意点详解
- Boost1.62.0 + VS2015 配置
- 枚举
- 如何规划自己的程序员人生