设计制作一个自己的个性化弹出提示框

相关链接: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)">&times;</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，弄些自己的渐变，多练练。当然，假如你实在是不想这么折腾的话，可以直接下载我的测试页面：我的弹出提示框

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

评论

39 楼 wulichenai 2011-12-08  

很好啊 ，期待下一期

38 楼 ludatong110 2011-06-28  

这个还是不错，我们现在就是这么做的，不过我只是在页面放两个Div（前景和背景），内容动态填充。。还很不错。。

37 楼 chenjl 2011-06-10  

很好，很强大，很漂亮....

有没有好的CSS籍介绍一下，最好是有例子的。

36 楼 BoneWG 2011-06-09  

socrazy06 写道

哥们！~~~东西感觉不错，但是无法下载啊！

可以的啊,河北网通亲测,dbank的网盘,应该还行吧

35 楼 socrazy06 2011-06-09  

哥们！~~~东西感觉不错，但是无法下载啊！

34 楼 openFox 2011-06-08  

支持原创，楼主辛苦

33 楼 上官车月 2011-06-07  

先顶了，，javaScript太强悍了

哥子，多分享点的  谢谢了

32 楼 奥义之舞 2011-06-07  

   感觉不错，是好帖子，给楼主评了个良好！

31 楼 BoneWG 2011-06-07  

znjq 写道

我们已经实现了一套成熟的UI框架,实现了各种组件,跨浏览器,做到按需加载,动态加载等特性.
其实做一个跨浏览器的弹出框不是很难,但是没有必要去替代原生的alert,为了做到阻塞而花费太多的功夫实在没有必要.改变方式用回调函数好了.

我用的就是这种方式,回调的确认,取消,关闭和消失4个方法,

30 楼 znjq 2011-06-06  

我们已经实现了一套成熟的UI框架,实现了各种组件,跨浏览器,做到按需加载,动态加载等特性.
其实做一个跨浏览器的弹出框不是很难,但是没有必要去替代原生的alert,为了做到阻塞而花费太多的功夫实在没有必要.改变方式用回调函数好了.

29 楼 BoneWG 2011-06-06  

jiangnan2112 写道

我以前写过一个，但后来发现要想在第个浏览器上都是一样的效果还真有点麻烦，怕用户用了特别的浏览器有问题，一直也不敢用了，但愿楼主做的完美些。

我的设计是根据客户端展现的，ie下各功能模块没问题，不过不太好看，毕竟是css3的效果，如果弄成图片的话实现全兼容很简单的还是，
我一直强调只是提供一个思路，自己设计实现才有成就感啊，后续还有js方面的讲解，敬请关注！

28 楼 BoneWG 2011-06-06  

madbluesky 写道

甚至不觉得lz的设计比默认的好看 囧！

如果真的要发一这个标题的帖子，感觉至少要在用户体验或者艺术表现方面有出众的表现才行，不然确实容易被投新手

个人审美问题，不过在ie环境下确实不好看，只有chrome才能完美展现，设计这个初衷只是为了可以自己定制内容以及确认取消，关闭等一系列方法，仅仅一个alert实在没法实现，后续还有讲解

27 楼 jiangnan2112 2011-06-06  

我以前写过一个，但后来发现要想在第个浏览器上都是一样的效果还真有点麻烦，怕用户用了特别的浏览器有问题，一直也不敢用了，但愿楼主做的完美些。

26 楼 naoda 2011-06-05  

期待下次讲的更精彩！！！

25 楼 madbluesky 2011-06-05  

甚至不觉得lz的设计比默认的好看 囧！

如果真的要发一这个标题的帖子，感觉至少要在用户体验或者艺术表现方面有出众的表现才行，不然确实容易被投新手

24 楼 obullxl 2011-06-05  

原创，很好。

23 楼 jackra 2011-06-05  

马克-----

22 楼 vb2005xu 2011-06-04  

BoneWG 写道

zui4yi1 写道

阻塞模型是不是这样的?(参考别的脚本语言的)
while(1){
switch(e){
case e1://
case e2://
...
}
}

js里面貌似不行啊,不过也用不着,有则更好,没有就算了

虽然没有这种语法 但是可以模拟实现 你可以自己 抛出错误 然后异常捕获

只不过在你抛出错误的同时 自定义一个变量 给它 赋予 你错误类型所对应的值

在 catch 厘米 通过 这个值来 调用不同的处理代码 ...

21 楼 francis.xjl 2011-06-04  

不错，讲得很清晰呀，支持一下，希望楼主能继续下期~~

20 楼 BoneWG 2011-06-04  

zui4yi1 写道

阻塞模型是不是这样的?(参考别的脚本语言的)
while(1){
switch(e){
case e1://
case e2://
...
}
}

js里面貌似不行啊,不过也用不着,有则更好,没有就算了