因为初学javascript,所以对于使用原生js来表达一些效果,根本不会。这段时间,在做圣诞节的活动,碰到了要写一个遮罩层,然后上面一个弹窗的效果,在网上可以找到很多素材。但是,也想要自己来写一个,一边学习,一边测试下学习效果。于是,在w3cshool上,翻看基础知识,然后琢磨着,就弄了一个效果。
首先,整个动作的描述就是,一个按钮,然后触发一个事件,然后弹出一个对话框。
于是,在html里的框架就是一个按钮,一个弹出窗口,一个遮罩层:
<div id="popDiv" class="mydiv" style="display:none;"> 恭喜你!<br/> 你的成绩为:60分<br/> <a href="javascript:closeDiv()">关闭窗口</a> </div> <div id="bg" class="bg" style="display:none;"></div> <div style="padding-top: 20px;"> <input type="Submit" name="" value="显示层" onclick="javascript:showDiv()" /> </div>
看的时候,可以忽略掉所有的样式。
从上面的代码分析,我们要点击”显示层“这个按钮,弹出遮罩层和对话框。点击“关闭窗口”则,关闭遮罩层和对话框。只需设置对象的display属性就可以实现。因此,它的js代码就如下:
function showDiv(){ document.getElementById('popDiv').style.display='block'; document.getElementById('bg').style.display='block'; } function closeDiv(){ document.getElementById('popDiv').style.display='none'; document.getElementById('bg').style.display='none'; }
对于,css部分的代码,大家可以根据自己的需求进行修饰。
html,body {height:100%; margin:0px; font-size:12px;} .mydiv { background-color: #ff6; border: 1px solid #f90; text-align: center; line-height: 40px; font-size: 12px; font-weight: bold; z-index:99; width: 300px; height: 120px; position: absolute; z-index: 99; left:40%;/*FF IE7*/ top: 40%;/*FF IE7*/ } .bg { background-color: #000; width: 100%; height: 100%; left:0; top:0;/*FF IE7*/ filter:alpha(opacity=80);/*IE*/ opacity:0.8;/*FF*/ z-index:2; position: absolute; }
这样一个简单的模型就已经完成了。比起,下了一堆的代码和引入很多的jquery文件显得精简很多。大家可以试试。
上一篇:2015年工作小结--设计篇
下一篇:微信大转盘源码及指针忽隐忽现问题
© hanhaisha.com. All Rights Reserved 湘ICP备15009704号-1
梦里不知岁月匆、梦醒不知韶华过