UED设计提示插件

1、准备好需要用到的图标。

2、新建html文档。

3、书写hmtl代码。

<center>

4种不同提示图标

<input type="button" value="图标1" onclick="clickme(1)" />

<input type="button" value="图标4" onclick="clickme(4)" />

<input type="button" value="图标5" onclick="clickme(5)" />

<input type="button" value="图标6" onclick="clickme(6)" />

隐藏

<input type="button" value="隐藏" onclick="clickhide()" />

3秒后自动隐藏

<input type="button" value="图标1" onclick="clickautohide(1)" />

<input type="button" value="图标4" onclick="clickautohide(4)" />

<input type="button" value="图标5" onclick="clickautohide(5)" />

<input type="button" value="图标6" onclick="clickautohide(6)" />

<div style="top:400px;display:block" id="q_Msgbox" class="zeng_msgbox_layer_wrap"><span id="mode_tips_v2" style="z-index:10000" class="zeng_msgbox_layer"><span class="gtl_ico_clear"></span><span class="gtl_ico_loading"></span>正在加载中，请稍后...<span class="gtl_end"></span></span></div>

<div class="zeng_msgbox_layer_wrap" id="q_Msgbox" style=" display:block"></div>

</center>

4、书写css代码。

.zeng_msgbox_layer, .zeng_msgbox_layer .gtl_ico_succ, .zeng_msgbox_layer .gtl_ico_fail, .zeng_msgbox_layer .gtl_ico_hits, .zeng_msgbox_layer .gtl_ico_clear, .zeng_msgbox_layer .gtl_end { display: inline-block; height: 54px; line-height: 54px; font-weight: bold; font-size: 14px; color: #606060; background-image: url("../images/gb_tip_layer.png"); _background-image: url("../images/gb_tip_layer_ie6.png"); background-repeat: no-repeat }

.zeng_msgbox_layer_wrap { width: 100%; position: fixed; _position: absolute; top: 46%; left: 0; text-align: center; z-index: 65533 }

.zeng_msgbox_layer { background-position: 0 -161px; background-repeat: repeat-x; padding: 0 18px 0 9px; margin: 0 auto; position: relative }

.zeng_msgbox_layer .gtl_ico_succ { background-position: -6px 0; left: -45px; top: 0; width: 45px; position: absolute }

.zeng_msgbox_layer .gtl_end { background-position: 0 0; position: absolute; right: -6px; top: 0; width: 6px }

.zeng_msgbox_layer .gtl_ico_fail { background-position: -6px -108px; position: absolute; left: -45px; top: 0; width: 45px }

.zeng_msgbox_layer .gtl_ico_hits { background-position: -6px -54px; position: absolute; left: -45px; top: 0; width: 45px }

.zeng_msgbox_layer .gtl_ico_clear { background-position: -6px 0; left: -5px; width: 5px; position: absolute; top: 0 }

.zeng_msgbox_layer .gtl_ico_loading { width: 16px; height: 16px; border: 0; background-image: url(../images/loading.gif); float: left; margin: 19px 10px 0 5px }

5、代码整体结构。

6、查看效果。