锁定老帖子 主题:设计制作一个自己的个性化弹出提示框
精华帖 (0) :: 良好帖 (8) :: 新手帖 (6) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2011-06-01
最后修改:2011-10-15
http://yu123.me/
相关链接:
设计制作一个自己的弹出提示框 引用 说明:为什么评为新手帖?评了新手就请你说下理由!讨论也好改也好,我写的都是自己原创的,而且主要讲的是css与设计,这很新手吗?
我辛辛苦苦写半天,被你评新手,难道你写过?难道我写的都是不值得别人看的?强烈建议论坛评分实名化! 做前端的一般都知道,尽量减少使用alert,主要因为系统的弹出框会终止当前一切进程,甚至连窗口操作也被禁止,实在是不太友好,所以这次讲下如何定制一个你自己的弹出提示框。即:使用html+css制作一个提示框,并使用javascript为它添加常用方法来达到替换系统提示框的目的。 因为时间有限(太忙了,养家糊口的男人你伤不起啊~),我打算分3篇:1、设计制作一个自己的弹出提示框;2、为你的弹出提示框添加交互功能;3、拖拽你的弹出提示框。 在此之前先让我们看下各浏览器的alert效果: <!--more--> ![]() Chrome下当同一个页面多次alert的时候,会提示可以禁止此页面再次弹出提示框,Opera直接就提示可以禁止脚本继续运行,firefox4 将简洁进行到底,自我感觉Chrome 在这点上应该向人家学习,ie还是老样子,大家都熟悉了。 我们来分解下提示框的组成部分,我画了个图(懒人有懒法): ![]() 分析下这个结构,它必须有个默认宽度,不能撑的整屏全糊住,高度应该由其中的内容来决定,一开始出现是在屏幕居中,并要有个半透明的遮罩以凸(好邪恶的字 :c5 )显出它的存在,而且点击标题不松手还可以移动,考虑下,如何用html代码来构架。 先声明:我只是讲下如何制作的一个思路,至于具体的制作,你不需要全部照我的来,我的设计并不出众(好吧,我承认很烂!摔! :e7 )。下面这个就是我的设计: ![]() 现在你应该已经构思出了一个提示框的html代码,很简单的,如下: <div id="hbg"></div> <!-- 半透明背景遮罩 --> <div id="alertM"> <!-- 提示框的容器 --> <h5 id="alertT">提示</h5> <!-- 标题 --> <a id="alertR" title="关闭" href="javascript:void(0)">×</a> <!-- 关闭按钮 --> <p id="alertP">测试</p> <!-- 内容 --> <div id="alertBtns"> <!-- 按钮区域 --> <a id="alertY" title="确认" href="javascript:void(0)">确认</a> <!-- 确认和取消按钮 --> <a id="alertN" title="取消" href="javascript:void(0)">取消</a> </div> </div> 我们来写下css,注意到里面的每个元素都有个id吗,主要是为了减少其被你的其他样式所覆盖的缘故,叫这几个id的应该不多吧,先进行初始化,减少不兼容: #alertM,#alertT,#alertR,#alertP,#alertBtns{ margin:0; padding:0; font-size:14px; line-height:24px; font-family:arial,sans-serif; text-align:left } #alertR,#alertBtns a{ text-decoration:none; } 然后是半透明背景,注意背景的高度和透明度,这里是以后要由js来控制的,而容器之所以绝对定位,主要是为了以后定位方便并添加拖拽功能: #hbg{ width:100%; position:absolute; background:#000; z-index:998;/* 设置层级,主要是为了遮住页面内的其他内容 */ top:0; left:0; height:2000px;/* 随便填,超过整屏高度就行,后面由js控制 */ opacity:0.6/* ie8及以下浏览器看不到效果,我也懒的给你写filter,换其他的现代浏览器吧 */ } #alertM{ position:absolute;/* 绝对定位,为了以后控制方便 */ top:200px; background:#fff; z-index:999;/* 层级,当然要比背景高1啦,要不你怎么看见 */ width:400px; height:auto; left:600px;/* 随便填,后面由js控制 */ border:1px #ccc solid } 标题栏和内容,非常简单的: #alertT{ margin:4px; padding:0 16px; background:#0398e1; color:#fff; border:1px #16a8fc solid; } #alertP{ padding:12px; } 关闭按钮,右浮动,并使用负值margin 调高: #alertR{ font-size:24px; float:right;/* 右浮动 */ margin:-32px 8px 0 0;/* 使用负值margin 调高 */ padding:4px; color:#72d5fb; font-weight:bold; } #alertR:hover{ color:#fff; } 底部按钮区域,也是非常简单的: #alertBtns{ text-align:right; } #alertBtns a{ margin:8px; padding:0 24px; color:#000; background: #EEE; border: 1px #E6E6E6 solid; display: inline-block; } #alertBtns a:hover{ background: #ccc; border: 1px #ddd solid; } #alertBtns a:active{ background: #bbb; border: 1px #aaa solid; } 完成啦,怎么样,什么效果,是不是有种微妙的坑爹感觉 :e1 ?是不是如下图一样: ![]() 别着急,还没完,还得继续添加下css3效果,如果你用的是ie(神马360,qq,搜狐全都是ie内核)并且版本不高于8的话就没必要继续了,下面的代码对你来说是另一个世界的存在。 非ie党们,我们继续,先调整下容器和标题: #alertM{ box-shadow:0px 0px 24px #000;/* 阴影 */ border-radius:12px;/* 圆角 */ } #alertT{ text-shadow:0px 1px 1px #000;/* 文字阴影 */ background-image:-moz-linear-gradient(top, #03b3f6, #0374c6);/* 火狐下的渐变 */ background-image:-webkit-gradient(linear,left top, left bottom, color-stop(0, #03b3f6),color-stop(1, #0374c6));/* webkit内核下的渐变 */ border-radius:8px; box-shadow:0px 1px 2px rgba(0,0,0,0.8); } 然后是确认和取消按钮,跟上面差不多: #alertBtns a{ text-shadow: 0px 1px 1px white; background-image: -moz-linear-gradient(top, #fff, #ccc); background-image: -webkit-gradient(linear,left top, left bottom, color-stop(0, #fff),color-stop(1, #ccc)); border-radius: 4px; box-shadow: 0px 0px 2px rgba(0,0,0,0.8); } #alertBtns a:hover{ background: #ccc; background-image: -moz-linear-gradient(top, #f6f6f6,#c6c6c6); background-image: -webkit-gradient(linear,left top, left bottom, color-stop(0, #f6f6f6),color-stop(1, #c6c6c6)); box-shadow: 0px 0px 3px rgba(0,0,0,1); border: 1px #ddd solid; } #alertBtns a:active{ background: #bbb; background-image: -moz-linear-gradient(top, #f3f3f3,#bbb); background-image: -webkit-gradient(linear,left top, left bottom, color-stop(0, #f3f3f3),color-stop(1, #bbb)); box-shadow: 0px 0px 2px rgba(0,0,0,0.6); border: 1px #aaa solid; } 最后是关闭按钮,我要弄点有趣的,给它添加个旋转动画: #alertR{ text-shadow:0px 1px 1px #000; -webkit-transform: rotate(-360deg);/* 一开始时候先设定旋转-360度,这样鼠标悬浮的时候转的圈数多一些 */ -moz-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); -webkit-transition: -webkit-transform 0.6s ease-out;/* 设定动画部分,时间以及效果 */ -moz-transition: -moz-transform 0.6s ease-out; -o-transition: -o-transform 0.6s ease-out; transition: transform 0.6s ease-out; } #alertR:hover{ color:#fff; -webkit-transform: rotate(360deg);/* 就是在0.6s 内从-360度转到360度的意思 */ -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } #alertR:active{ text-shadow:0px 0px 1px #000; } 呼,恭喜你,第一部分达成,建议你修改下css,弄些自己的渐变,多练练。当然,假如你实在是不想这么折腾的话,可以直接查看:Demo 下期讲解使用jquery给你的提示框添加互动效果,输入一些参数就可以控制显示时间,关闭方法,确认方法,真正替代系统的默认提示框。 详情访问: 为弹出提示框添加动态接口 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2011-06-01
先顶你一下,正在找这方面的东西
|
|
返回顶楼 | |
发表时间:2011-06-01
好好研究下,感觉很不错啊啊~!
|
|
返回顶楼 | |
发表时间:2011-06-02
不错,学习一下。
|
|
返回顶楼 | |
发表时间:2011-06-02
讲的很详细
|
|
返回顶楼 | |
发表时间:2011-06-03
不知楼主要如何模拟正常alert阻塞js的执行?
这种设计好是好,不过关键是一旦使用,那么对alert的使用方式都要改变,成本也不小啊。 |
|
返回顶楼 | |
发表时间:2011-06-03
我关注回调?请问怎么实现?
|
|
返回顶楼 | |
发表时间:2011-06-03
最后修改:2011-06-03
darkewiser 写道 不知楼主要如何模拟正常alert阻塞js的执行?
这种设计好是好,不过关键是一旦使用,那么对alert的使用方式都要改变,成本也不小啊。 额,阻塞js我还没实现,有什么建议么? 使用方式就是alertM('文本',{参数:参数})的形式,后面的参数可以省略,具体下节再讲,欢迎关注! |
|
返回顶楼 | |
发表时间:2011-06-03
最后修改:2011-06-03
rentianchou 写道 我关注回调?请问怎么实现?
alertM('文本',{参数:参数}),通过在参数里传入函数来实现回调, 可以传入点击确定按钮,点击取消按钮,点击关闭按钮,还有提示框消失时回调4个参数,具体下节再讲,欢迎关注! |
|
返回顶楼 | |
发表时间:2011-06-03
darkewiser 写道 不知楼主要如何模拟正常alert阻塞js的执行?
这种设计好是好,不过关键是一旦使用,那么对alert的使用方式都要改变,成本也不小啊。 上次看到一牛人,写了一个javascript写的javascript解析程序。做js阻塞。 强大了,给javascript增加新的特性了。 |
|
返回顶楼 | |