原创JS模拟Alert弹出框效果--自定义CSS样式
由于系统默认alert弹出窗口不能自定义样式,有可能不符合网站的风格,虽然网上应该有很多这样的JS
但是还是自己写的比较放心,自己是新手,所以顺便练习一下对DOM的操作
支持IE6下的SELECT不能遮罩的问题,谷歌支持圆角,IE6下就比较丑了,四四方方的,不过可以自定义自己喜欢的样式
听取建议后,修改了position:fixed, IE6下用hack处理了。
点击看效果:
点击模拟Alert弹出框
点击模拟Alert弹出框
点击模拟Alert弹出框
<!--
#alertMsg {
display: none;
width: 400px;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 1px 1px 10px black;
padding: 10px;
font-size: 12px;
position: absolute;
text-align: center;
background: #fff;
z-index: 100000;
}
#alertMsg_info {
padding: 2px 15px;
line-height: 1.6em;
text-align: left;
}
#alertMsg_btn1, #alertMsg_btn2 {
display: inline-block;
background: url(http://www.zhangxinxu.com/study/image/sina_gray_btn.png) no-repeat left top;
padding-left: 3px;
color: #000000;
font-size: 12px;
text-decoration: none;
margin-right: 10px;
cursor: pointer;
}
#alertMsg_btn1 cite, #alertMsg_btn2 cite {
line-height: 24px;
display: inline-block;
padding: 0 13px 0 10px;
background: url(http://www.zhangxinxu.com/study/image/sina_gray_btn.png) no-repeat right top;
font-style: normal;
}
-->
所需CSS:
<style type="text/css">
#alertMsg
{
display
: none
;
width
: 400px
;
border
: 1px solid #ddd
;
border-radius
: 5px
;
box-shadow
: 1px 1px 10px black
;
padding
: 10px
;
font-size
: 12px
;
position
: absolute
;
text-align
: center
;
background
: #fff
;
z-index
: 100000
;
}
#alertMsg_info
{
padding
: 2px 15px
;
line-height
: 1.6em
;
text-align
: left
;
}
#alertMsg_btn1, #alertMsg_btn2
{
display
: inline-block
;
background
: url(images/gray_btn.png) no-repeat left top
;
padding-left
: 3px
;
color
: #000000
;
font-size
:
免责声明: 本文仅代表作者个人观点,与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。