你的位置:首页 > 网页设计

[网页设计]自定义弹窗Style样式


由于系统默认alert弹出窗口不能自定义样式,有可能不符合网站的风格,虽然网上应该有很多这样的JS

但是还是自己写的比较放心,顺便练习一下对DOM的操作

支持IE6下的SELECT不能遮罩的问题,谷歌支持圆角,IE6下就比较丑了,四四方方的,不过可以自定义自己喜欢的样式

听取建议后,修改了position:fixed, IE6下用hack处理了。

点击看效果:

点击模拟Alert弹出框

点击模拟Alert弹出框

点击模拟Alert弹出框

所需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: 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(images/gray_btn.png) no-repeat right top;      font-style: normal;    }  </style>
复制代码

 使用方法,直接调用函数,传递所需定义的信息,支持定义是否有取消键:

alertMsg(msg, mode) //mode为空,即只有一个确认按钮,mode为1时有确认和取消两个按钮

 

点击模拟Alert弹出框

点击模拟Alert弹出框

点击模拟Alert弹出框

函数代码:添加了一个获取窗口尺寸的函数,又长长了很多,可以把获取窗口的尺寸另外立一个函数放公共库里面,这里只是为了方便演示,写到一个函数里面

复制代码
function alertMsg(msg, mode) { //mode为空,即只有一个确认按钮,mode为1时有确认和取消两个按钮    msg = msg || '';    mode = mode || 0;    var top = document.body.scrollTop || document.documentElement.scrollTop;    var isIe = (document.all) ? true : false;    var isIE6 = isIe && !window.复制代码

 

点击模拟Alert弹出框

点击模拟Alert弹出框

点击模拟Alert弹出框