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

相关链接:[url]http://yu123.me/[/url]
[url=http://yu123.me/2011/05/design-alert/]设计制作一个自己的弹出提示框[/url]

[color=red][quote]说明:为什么评为新手帖?评了新手就请你说下理由!讨论也好改也好,我写的都是自己原创的,而且主要讲的是css与设计,这很新手吗?
我辛辛苦苦写半天,被你评新手,难道你写过?难道我写的都是不值得别人看的?强烈建议论坛评分实名化![/quote][/color]

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

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

在此之前先让我们看下各浏览器的alert效果:
<!--more-->
[img]http://dl.iteye.com/upload/attachment/491357/3c3c0aa5-6a17-3585-9de3-e7366bee2ed2.png[/img]

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

我们来分解下提示框的组成部分,我画了个图(懒人有懒法):

[img]http://dl.iteye.com/upload/attachment/491359/a0e57a28-dcac-395d-ab35-730026f77156.png[/img]

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

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

[img]http://dl.iteye.com/upload/attachment/491361/17545311-253b-379a-b430-11f9f798683f.png[/img]

现在你应该已经构思出了一个提示框的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 ?是不是如下图一样:

[img]http://dl.iteye.com/upload/attachment/491363/29d61b12-29a2-3011-8074-286569a8984b.png[/img]

别着急,还没完,还得继续添加下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,弄些自己的渐变,多练练。当然,假如你实在是不想这么折腾的话,可以直接下载我的测试页面:[url=http://dl.dbank.com/c0n0qqfhvz]我的弹出提示框[/url]

下期讲解使用jquery给你的提示框添加互动效果,输入一些参数就可以控制显示时间,关闭方法,确认方法,真正替代系统的默认提示框。下期再见!
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用Vue的指令和组件来实现一个跟随文字的提示框。 首先,在模板中添加一个需要跟随的元素,例如一个按钮: ```html <template> <div> <button @mouseover="showTip" @mouseleave="hideTip">Hover Me</button> <tip-popup :text="tipText" v-if="show"></tip-popup> </div> </template> ``` 在这里,我们添加了一个按钮,并绑定了两个事件,当鼠标移动到按钮上时,会调用showTip方法来显示提示框;当鼠标离开按钮时,会调用hideTip方法来隐藏提示框。 在模板中,我们还添加了一个tip-popup组件,用于显示提示框。这个组件可以接收一个text属性,用于显示提示文本;还有一个v-if指令,用于控制组件的显示和隐藏。 接下来,我们可以定义showTip和hideTip方法: ```js export default { data() { return { show: false, tipText: 'Hello, World!' } }, methods: { showTip() { this.show = true; }, hideTip() { this.show = false; } } } ``` 在这里,我们定义了show和tipText两个数据,show用于控制提示框的显示和隐藏,tipText用于保存提示文本。 showTip方法会把show设置为true,从而显示提示框;hideTip方法会把show设置为false,从而隐藏提示框。 最后,我们可以定义tip-popup组件: ```html <template> <div class="tip-popup" :style="{ top: top + 'px', left: left + 'px' }"> {{ text }} </div> </template> <script> export default { props: { text: String }, data() { return { top: 0, left: 0 } }, mounted() { this.setPosition(); window.addEventListener('resize', this.setPosition); }, beforeUnmount() { window.removeEventListener('resize', this.setPosition); }, methods: { setPosition() { const rect = this.$el.getBoundingClientRect(); this.top = rect.top + rect.height + 10; this.left = rect.left + rect.width / 2; } } } </script> <style scoped> .tip-popup { position: absolute; z-index: 999; padding: 8px; background-color: #333; color: #fff; border-radius: 4px; font-size: 14px; text-align: center; white-space: nowrap; } </style> ``` 在这里,我们定义了一个tip-popup组件,它接收一个text属性,用于显示提示文本。 在mounted钩子中,我们调用setPosition方法来设置提示框的位置,并添加了一个resize事件监听器,用于在窗口大小改变时重新设置位置。 setPosition方法会使用getBoundingClientRect方法获取元素的位置和大小信息,然后计算提示框的位置。 最后,我们还添加了一些样式,用于美化提示框的样式。 这样,我们就完成了一个跟随文字的提示框。完整代码如下: ```html <template> <div> <button @mouseover="showTip" @mouseleave="hideTip">Hover Me</button> <tip-popup :text="tipText" v-if="show"></tip-popup> </div> </template> <script> import TipPopup from './TipPopup.vue'; export default { components: { TipPopup }, data() { return { show: false, tipText: 'Hello, World!' } }, methods: { showTip() { this.show = true; }, hideTip() { this.show = false; } } } </script> <style> button { padding: 8px; background-color: #333; color: #fff; border-radius: 4px; font-size: 14px; cursor: pointer; } </style> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值