//alert样式优化
function alert(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-100) + '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); }

  

alert样式优化的更多相关文章

  1. 【前端】input radio多选事件获取所有选中的id,radio样式优化可修改

    $("#all_button").on('click', function() { obj = document.getElementsByClassName("inpu ...

  2. 改写js原装的alert样式

    1.将下面的js代码单独到一个js文件中,然后在页面中引用 AlertDialog.js //改写js原装的alert样式 var t; var timeclose = 0; var showBack ...

  3. CSS select样式优化 含jquery代码

    CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的: html结构如下: <div class="sel_wrap"> < ...

  4. 上传按钮样式优化 <input type="file" />

    <html><head><title>上传按钮样式优化</title> <style>.form-element-file-wapper { ...

  5. 【转】bootbox自定义dialog、confirm、alert样式,以及基本设置方法setDefaults中可用参数

    <html> <head> <meta charset="utf-8"> <meta name="viewport" ...

  6. CSS效果:CSS select样式优化 含jquery代码

    CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的: html结构如下: <div class="sel_wrap"> < ...

  7. CSS select样式优化

    下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,就可以起到美化的作用了. <div class="sel_wrap"> <label>请选择 ...

  8. MetaBase使用iframe内嵌到Vue页面样式优化

    Matebase是一个开源,易上手的BI工具,这里不做太多介绍了. 官网地址:https://www.metabase.com/ 解决问题描述: 使用iframe内嵌Metabase公开链接之后,页面 ...

  9. Django 小实例S1 简易学生选课管理系统 8 CSS样式优化

    Django 小实例S1 简易学生选课管理系统 第8节--CSS样式优化 点击查看教程总目录 作者自我介绍:b站小UP主,时常直播编程+红警三,python1对1辅导老师. 前面的几节下来,用户模块基 ...

随机推荐

  1. Django之ModelForm操作

    一.ModelForm的使用 顾名思义,ModelForm就是将Model与Form进行绑定,Form有自动生成表单的作用,但是每一个forms字段需要自己手动填写,而Model就是数据库表包含了所有 ...

  2. vue之路由导航守卫-全局前置守卫

    一.使用方式 全局前置守卫用于在路由配置生效之前进行一些动作,可以使用 router.beforeEach 注册一个全局前置守卫: const router = new VueRouter({ ... ...

  3. Manacher模板(O(n)内求最长回文串长度)

    转自:https://segmentfault.com/a/1190000008484167 /* 由于回文分为偶回文(比如 bccb)和奇回文(比如 bcacb),而在处理奇偶问题上会比较繁琐,所以 ...

  4. 多媒体查询 @media 报错

    You may not @extend an outer selector from within @media.You may only @extend selectors within the s ...

  5. shell脚本每五分钟执行一次可执行程序(nohup)

    两种解决方案:个人推荐第二种,使用crontab来定时执行任务   1.shell代码如下: nohup command &. 解释: 后台永久运行command命令. (nohup表示后台永 ...

  6. Java/sql找出oracle数据库有空格的列

    1.java方式 String table_sql = "select table_name from user_tables";//所有用户表 List<String> ...

  7. tarjan求强联通分量

    tarjan求强联通分量 变量含义说明: pre[i]:i点的被访问的时钟编号,被分配后保持不变 low[i]:i点能访问的最先的点的时钟编号,随子节点改变 scc_no[i]:i点所在的强联通分量的 ...

  8. P1064 金明的预算方案 (分组背包稍稍变形)

    题目描述 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间金明自己专用的很宽敞的房间.更让他高兴的是,妈妈昨天对他说:“你的房间需要购买哪些物品,怎么布置,你说了算,只要不超过NN元钱就行”. ...

  9. (转)OpenFire源码学习之十七:HTTP Service插件

    转:http://blog.csdn.net/huwenfeng_2011/article/details/43457645 HTTP Service插件 这里的http接口插件是神马? Openfi ...

  10. VS2010 下C++使用UTF8编码

    http://www.nubaria.com/en/blog/?p=289 #pragma execution_character_set("utf-8")