原创JS模拟Alert弹出框成效-自定义CSS样式
日期：2014-05-17 浏览次数：20873 次
原创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 :
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
