web自定义弹出框

原文链接：设计制作一个自己的个性化弹出提示窗

做前端的一般都知道，尽量减少使用alert，主要因为系统的弹出框会终止当前一切进程，甚至连窗口操作也被禁止，实在是不太友好，所以这次讲下如何定制一个你自己的弹出提示框。即：使用html+css制作一个提示框，并使用javascript为它添加常用方法来达到替换系统提示框的目的。

因为时间有限（太忙了，养家糊口的男人你伤不起啊～），我打算分3篇：1、设计制作一个自己的弹出提示框；2、为你的弹出提示框添加交互功能；3、拖拽你的弹出提示框。

在此之前先让我们看下各浏览器的alert效果：
<!--more-->


Chrome下当同一个页面多次alert的时候，会提示可以禁止此页面再次弹出提示框，Opera直接就提示可以禁止脚本继续运行，firefox4 将简洁进行到底，自我感觉Chrome 在这点上应该向人家学习，ie还是老样子，大家都熟悉了。

我们来分解下提示框的组成部分，我画了个图（懒人有懒法）：



分析下这个结构，它必须有个默认宽度，不能撑的整屏全糊住，高度应该由其中的内容来决定，一开始出现是在屏幕居中，并要有个半透明的遮罩以凸（好邪恶的字 :c5 ）显出它的存在，而且点击标题不松手还可以移动，考虑下，如何用html代码来构架。

先声明：我只是讲下如何制作的一个思路，至于具体的制作，你不需要全部照我的来，我的设计并不出众（好吧，我承认很烂！摔！ :e7 ）。下面这个就是我的设计:



现在你应该已经构思出了一个提示框的html代码，很简单的，如下：

Html代码

1. <divid="hbg"></div><!-- 半透明背景遮罩 -->

2. <divid="alertM"><!-- 提示框的容器 -->

3. <h5id="alertT">提示</h5><!-- 标题 -->

4. <aid="alertR"title="关闭"href="void(0)"< /span>>&times;</a><!-- 关闭按钮 -->

5. <pid="alertP">测试</p><!-- 内容 -->

6. <divid="alertBtns"><!-- 按钮区域 -->

7. <aid="alertY"title="确认"href="void(0)"< /span>>确认</a><!-- 确认和取消按钮 -->

8. <aid="alertN"title="取消"href="void(0)"< /span>>取消</a>

9. </div>

10. </div>

我们来写下css，注意到里面的每个元素都有个id吗，主要是为了减少其被你的其他样式所覆盖的缘故，叫这几个id的应该不多吧，先进行初始化，减少不兼容：

Css代码

1. #alertM,#alertT,#alertR,#alertP,#alertBtns{

2. margin:0;

3. padding:0;

4. font-size:14px;

5. line-height:24px;

6. font-family:arial,sans-serif;

7. text-align:left

8. }

9. #alertR,#alertBtns a{

10. text-decoration:none;

11. }

然后是半透明背景，注意背景的高度和透明度，这里是以后要由js来控制的，而容器之所以绝对定位，主要是为了以后定位方便并添加拖拽功能：

Css代码

1. #hbg{

2. width:100%;

3. position:absolute;

4. background:#000;

5. z-index:998;/* 设置层级，主要是为了遮住页面内的其他内容 */

6. top:0;

7. left:0;

8. height:2000px;/* 随便填，超过整屏高度就行，后面由js控制 */

9. opacity:0.6/* ie8及以下浏览器看不到效果，我也懒的给你写filter，换其他的现代浏览器吧 */

10. }

11. #alertM{

12. position:absolute;/* 绝对定位，为了以后控制方便 */

13. top:200px;

14. background:#fff;

15. z-index:999;/* 层级，当然要比背景高1啦，要不你怎么看见 */

16. width:400px;

17. height:auto;

18. left:600px;/* 随便填，后面由js控制 */

19. border:1px #ccc solid

20. }

标题栏和内容，非常简单的：

Css代码

1. #alertT{

2. margin:4px;

3. padding:0 16px;

4. background:#0398e1;

5. color:#fff;

6. border:1px #16a8fc solid;

7. }

8. #alertP{

9. padding:12px;

10. }

关闭按钮，右浮动，并使用负值margin 调高：

Css代码

1. #alertR{

2. font-size:24px;

3. float:right;/* 右浮动 */

4. margin:-32px 8px 00;/* 使用负值margin 调高 */

5. padding:4px;

6. color:#72d5fb;

7. font-weight:bold;

8. }

9. #alertR:hover{

10. color:#fff;

11. }

底部按钮区域，也是非常简单的：

Css代码

1. #alertBtns{

2. text-align:right;

3. }

4. #alertBtns a{

5. margin:8px;

6. padding:0 24px;

7. color:#000;

8. background: #EEE;

9. border: 1px #E6E6E6 solid;

10. display: inline-block;

11. }

12. #alertBtns a:hover{

13. background: #ccc;

14. border: 1px #ddd solid;

15. }

16. #alertBtns a:active{

17. background: #bbb;

18. border: 1px #aaa solid;

19. }

完成啦，怎么样，什么效果，是不是有种微妙的坑爹感觉 :e1 ？是不是如下图一样：



别着急，还没完，还得继续添加下css3效果，如果你用的是ie（神马360，qq，搜狐全都是ie内核）并且版本不高于8的话就没必要继续了，下面的代码对你来说是另一个世界的存在。

非ie党们，我们继续，先调整下容器和标题：

Css代码

1. #alertM{

2. box-shadow:0px 0px 24px #000;/* 阴影 */

3. border-radius:12px;/* 圆角 */

4. }

5. #alertT{

6. text-shadow:0px 1px 1px #000;/* 文字阴影 */

7. background-p_w_picpath:-moz-linear-gradient(top, #03b3f6, #0374c6);/* 火狐下的渐变 */

8. background-p_w_picpath:-webkit-gradient(linear,left top, left bottom, color-stop(0, #03b3f6),color-stop(1, #0374c6));/* webkit内核下的渐变 */

9. border-radius:8px;

10. box-shadow:0px 1px 2px rgba(0,0,0,0.8);

11. }

然后是确认和取消按钮，跟上面差不多：

Css代码

1. #alertBtns a{

2. text-shadow: 0px 1px 1px white;

3. background-p_w_picpath: -moz-linear-gradient(top, #fff, #ccc);

4. background-p_w_picpath: -webkit-gradient(linear,left top, left bottom, color-stop(0, #fff),color-stop(1, #ccc));

5. border-radius: 4px;

6. box-shadow: 0px 0px 2px rgba(0,0,0,0.8);

7. }

8. #alertBtns a:hover{

9. background: #ccc;

10. background-p_w_picpath: -moz-linear-gradient(top, #f6f6f6,#c6c6c6);

11. background-p_w_picpath: -webkit-gradient(linear,left top, left bottom, color-stop(0, #f6f6f6),color-stop(1, #c6c6c6));

12. box-shadow: 0px 0px 3px rgba(0,0,0,1);

13. border: 1px #ddd solid;

14. }

15. #alertBtns a:active{

16. background: #bbb;

17. background-p_w_picpath: -moz-linear-gradient(top, #f3f3f3,#bbb);

18. background-p_w_picpath: -webkit-gradient(linear,left top, left bottom, color-stop(0, #f3f3f3),color-stop(1, #bbb));

19. box-shadow: 0px 0px 2px rgba(0,0,0,0.6);

20. border: 1px #aaa solid;

21. }

最后是关闭按钮，我要弄点有趣的，给它添加个旋转动画：

Css代码

1. #alertR{

2. text-shadow:0px 1px 1px #000;

3. -webkit-transform: rotate(-360deg);/* 一开始时候先设定旋转-360度，这样鼠标悬浮的时候转的圈数多一些 */

4. -moz-transform: rotate(-360deg);

5. -o-transform: rotate(-360deg);

6. transform: rotate(-360deg);

7. -webkit-transition: -webkit-transform 0.6s ease-out;/* 设定动画部分，时间以及效果 */

8. -moz-transition: -moz-transform 0.6s ease-out;

9. -o-transition: -o-transform 0.6s ease-out;

10. transition: transform 0.6s ease-out;

11. }

12. #alertR:hover{

13. color:#fff;

14. -webkit-transform: rotate(360deg);/* 就是在0.6s 内从-360度转到360度的意思 */

15. -moz-transform: rotate(360deg);

16. -o-transform: rotate(360deg);

17. transform: rotate(360deg);

18. }

19. #alertR:active{

20. text-shadow:0px 0px 1px #000;

21. }

呼，恭喜你，第一部分达成，建议你修改下css，弄些自己的渐变，多练练。当然，假如你实在是不想这么折腾的话，可以直接查看： Demo

下期讲解使用jquery给你的提示框添加互动效果，输入一些参数就可以控制显示时间，关闭方法，确认方法，真正替代系统的默认提示框。

转载于:https://blog.51cto.com/jormin/1318600