由于系统默认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
: 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
isIe = (document.all) ? true
: false
;
var
isIE6 = isIe && !window.XMLHttpRequest;
var
sTop = document.documentElement.scrollTop || document.body.scrollTop;
var
sLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
var
winSize = function
(){
var
xScroll, yScroll, windowWidth, windowHeight, pageWidth, pageHeight;
//
innerHeight获取的是可视窗口的高度,IE不支持此属性
if
(window.innerHeight && window.scrollMaxY) {
xScroll
= document.body.scrollWidth;
yScroll
= window.innerHeight + window.scrollMaxY;
}
else
if
(document.body.scrollHeight > document.body.offsetHeight) { //
all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll
= document.body.scrollHeight;
}
else
{ //
Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll
= document.body.offsetHeight;
}
if
(self.innerHeight) { //
all except Explorer
windowWidth = self.innerWidth;
windowHeight
= self.innerHeight;
}
else
if
(document.documentElement && document.documentElement.clientHeight) { //
Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight
= document.documentElement.clientHeight;
}
else
if
(document.body) { //
other Explorers
windowWidth = document.body.clientWidth;
windowHeight
= document.body.clientHeight;
}
//
for small pages with total height less then height of the viewport
if
(yScroll < windowHeight) {
pageHeight
= windowHeight;
}
else
{
pageHeight
= yScroll;
}
//
for small pages with total width less then width of the viewport
if
(xScroll < windowWidth) {
pageWidth
= windowWidth;
}
else
{
pageWidth
= xScroll;
}
return
{
'pageWidth':pageWidth,
'pageHeight':pageHeight,
'windowWidth':windowWidth,
'windowHeight':windowHeight
}
}();
//
alert(winSize.pageWidth);
//
遮罩层
var
styleStr = 'top:0;left:0;position:absolute;z-index:10000;background:#666;width:' + winSize.pageWidth + 'px;height:' + (winSize.pageHeight + 30) + 'px;';
styleStr
+= (isIe) ? "filter:alpha(opacity=80);" : "opacity:0.8;"; //
遮罩层DIV
var
shadowDiv = document.createElement('div'); //
添加阴影DIV
shadowDiv.style.cssText = styleStr; //
添加样式
shadowDiv.id = "shadowDiv";
//
如果是IE6则创建IFRAME遮罩SELECT
if
(isIE6) {
var
maskIframe = document.createElement('iframe');
maskIframe.style.cssText
= 'width:' + winSize.pageWidth + 'px;height:' + (winSize.pageHeight + 30) + 'px;position:absolute;visibility:inherit;z-index:-1;filter:alpha(opacity=0);';
maskIframe.frameborder
= 0;
maskIframe.src
= "about:blank";
shadowDiv.appendChild(maskIframe);
}
document.body.insertBefore(shadowDiv, document.body.firstChild);
//
遮罩层加入文档
//
弹出框
var
styleStr1 = 'display:block;position:fixed;_position:absolute;left:' + (winSize.windowWidth / 2 - 200) + 'px;top:' + (winSize.windowHeight / 2 - 150) + 'px;'; //
弹出框的位置
var
alertBox = document.createElement('div');
alertBox.id
= 'alertMsg';
alertBox.style.cssText
= styleStr1;
//
创建弹出框里面的内容P标签
var
alertMsg_info = document.createElement('P');
alertMsg_info.id
= 'alertMsg_info';
alertMsg_info.innerHTML
= msg;
alertBox.appendChild(alertMsg_info);
//
创建按钮
var
btn1 = document.createElement('a');
btn1.id
= 'alertMsg_btn1';
btn1.href
= 'javas' + 'cript:void(0)';
btn1.innerHTML
= '<cite>确定</cite>';
btn1.onclick
= function
() {
document.body.removeChild(alertBox);
document.body.removeChild(shadowDiv);
return
true
;
};
alertBox.appendChild(btn1);
if
(mode === 1) {
var
btn2 = document.createElement('a');
btn2.id
= 'alertMsg_btn2';
btn2.href
= 'javas' + 'cript:void(0)';
btn2.innerHTML
= '<cite>取消</cite>';
btn2.onclick
= function
() {
document.body.removeChild(alertBox);
document.body.removeChild(shadowDiv);
return
false
;
};
alertBox.appendChild(btn2);
}
document.body.appendChild(alertBox);
}
点击模拟Alert弹出框
点击模拟Alert弹出框
点击模拟Alert弹出框
分享到:
相关推荐
自定义弹出框样式 alert修改 根据需要修改弹出框样式
<script type="text/javascript" src="__PUBLIC__/wxparent/js/sweetalert-dev.js"> <script type="text/javascript"> swal({ title: "", text: res.info, type: "" },function(){ window.location = "__URL__/...
js 精美弹出框 alert 可以设置样式,取代传统丑陋的alert弹出框
alert和confirm弹出框样式美化,可自定义颜色和样式,无须调用浏览器自带弹框。
自定义 js alert 弹出框
alert和confirm弹出框样式美化,可自定义颜色和样式,无须调用浏览器自带弹框。
闭包自定义alert 弹出框
<script type="text/javascript" src="__PUBLIC__/wxparent/js/sweetalert-dev.js"> <script type="text/javascript"> swal({ title: "", text: res.info, type: "" },function(){ window.location = "__URL__/...
可以自己定义遮罩层的样式和Alert弹出框的样式
有时候感觉系统自带的提示框太丑了,试试自定义提示框吧,直接引用js即可
用闭包的技术实现alert 弹出框效果,样式可以自己添加调整,使弹出框更加有弹性。更多变灵活
自定alert弹出框,自己可以做相应的修改、美化
自定义alertView弹出框
alert及confirm弹出框样式,换不错
alert弹出框插件,美观性好。 alert弹出框插件,美观性好。
其中,ios6alert.js是插件主要部分的js,ios6alert.css中定义的是对话框的默认样式,可以根据需要进行编辑。 对话框的HTML结构是通过js动态添加到页面上的,所以不需要在页面上额外准备内容。 只需要运行$("body")....
自己辛苦实现的一个,类似于alert的弹出框。个人觉得比较方便实用。希望大家多多指教
漂亮的alert弹出框
alert弹出框出现乱码,解决办法(js)
js jquery alert样式