//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. 【leetcode】bash脚本练习

    [192]Word Frequency Write a bash script to calculate the frequency of each word in a text file words ...

  2. app混合开发 fastlick.js 在ios上 input标签点击 不灵敏 处理

    ios11 上有这个问题 而老版本的ios没有 会出现这个的原因是使用fastclick.js点击后input没有获取焦点,所以只需要在fasyclick的源码的这个位置 可以直接在源码内搜索关键字找 ...

  3. 安卓8.0真机运行appium1.4遇到的问题:运行自动化脚本,手机自动安装 settings.apk和unclock.apk,执行脚本时提示安装UnicodeIME-debug.apk失败,怎么关掉自动安装?

    运行自动化脚本,手机自动安装 settings.apk和unclock.apk,执行脚本时提示安装UnicodeIME-debug.apk失败,怎么关掉自动安装? 这3个apk的目录分别是: D:\P ...

  4. Goaccess的简单使用

    goaccess了,它是一个日志分析工具,并不只是为nginx使用的,你也可以用它来分析apache,具有解析速度快,使用简单,能生成json,html,csv等特点. 1.goaccess的基本安装 ...

  5. SQL关于:警告: 聚合或其他 SET 操作消除了空值。

    方法一: create table tb ( id int, num int ) insert into tb select 1,10 insert into tb select 1,20 inser ...

  6. Delphi DBgrid 动态点击事件

    错误的写法: DBGrid1CellClick(DBGrid1.Columns[ DBGrid1.DataSource.DataSet.RecNo ]); //执行点击事件 正确的写法: DBGrid ...

  7. Thymeleaf 模板布局三种区别

  8. [bzoj2287]消失之物 题解(背包dp)

    2287: [POJ Challenge]消失之物 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1138  Solved: 654[Submit][ ...

  9. drag事件

    <!DOCTYPE HTML><html>  <head>      <title>拖动事件</title>    <style> ...

  10. php开发面试题---数据库SQL调优的几种方式

    php开发面试题---数据库SQL调优的几种方式 一.总结 一句话总结: 创建索引:尽量避免使用or或者like,或者sql中的正则 存储查询中间结果 可以加sphinx搜索技术 查询优化 主从数据库 ...