JavaScript弹框、对话框、提示框方法，以及原创JS模拟Alert弹出框效果
通过js实现网页弹出各种形式的窗口，常用的：弹出框、对话框、提示框等。
对话框
弹出对话框并输出一段提示信息
alert("提示信息！");询问框
弹出一个询问框，有确定和取消按钮 ，利用对话框返回的值 （true 或者 false）
if (confirm("你确定提交吗？")) {
alert("点击了确定");
}else{
alert("点击了取消");
}输入框
弹出一个输入框，输入一段文字，可以提交。需要注意的是，prompt有两个参数，前面是提示的话，后面是当对话框出来后，在对话框里的默认值
var name = prompt("请输入您的名字", ""); //将输入的内容赋给变量 name
if (name){
alert("欢迎您：" + name)
}弹出新窗口
window.open 弹出新窗口的命令；
'page.html' 弹出窗口的文件名；
'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空''代替；
height=100 窗口高度； width=400 窗口宽度； top=0 窗口距离屏幕上方的象素值； left=0 窗口距离屏幕左侧的象素值； toolbar=no 是否显示工具栏，yes为显示； menubar，scrollbars 表示菜单栏和滚动栏。 resizable=no 是否允许改变窗口大小，yes为允许； location=no 是否显示地址栏，yes为允许； status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；
'newwin':隐藏菜单栏地址栏工具条
window.open ('page.html')
//经过设置后的弹出窗口
window.open('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no') //这句要写成一行点击按钮时常用的6中提示框和操作
<!-----------按钮提示框---------->
<input type="button" name="btn2" id="btn2" value="删除" onclick="return confirm('Yes/No'););
<!-----------按钮提示框---------->
<input type="button" name="btn2" id="btn2" value="提示" onclick="javaScript:alert('您确定要删除吗？');
<!-----------提交按钮---------->
<input type="button" value="提交" onclick="javaScript:window.location.href='http://www.baidu.com';"/>
<!-----------关闭按钮---------->
<input type="button" value="关闭" onclick="javaScript:window.close();">
<!-----------返回并关闭连接---------->
<a href="#" onclick="javascript:;window.opener.location.reload();window.close()">返回</a>
javaScript:window.location.reload();//返回当前页并刷新
<!-----------返回上一级页面---------->
<input type="button" name="button" value="< 返回" onclick="javascript:history.go(-1)"/>原创JS模拟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.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;_top:' + (winSize.windowHeight / 2 + top - 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);
}使用方法，直接调用函数，传递所需定义的信息，支持定义是否有取消键：
alertMsg(msg, mode)
//mode为空，即只有一个确认按钮，mode为1时有确认和取消两个按钮本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
