//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. 防火墙---CentOS

    1.查看防火墙状态 firewall-cmd --state 2.停止防火墙 systemctl stop firewalld.service 3.禁止开机启动防火墙 systemctl disabl ...

  2. 【JavaWeb项目】一个众筹网站的开发(四)后台用户注册功能

    重点: 密码加密存储 使用jQuery插件做校验和错误提示等 密码不能明文存储,在数据库中是加密存储的 可逆加密:通过密文使用解密算法得到明文 DES AES 不可逆加密:通过密文,得不到明文 MD5 ...

  3. jQuery与Vue的区别、从jQuery到Vue框架优点总结

    一.两者的区别 1.数据与视图分离 2.数据驱动视图 二.从jQuery到Vue框架的总结 1.数据与视图分离,解耦 2.数据驱动视图,只关心数据,DOM操作已经被框架封装

  4. C/C++ 智能指针线程池

    //这个线程池存在一定的BUG 如果没有多线程编程基础的先生请谨慎使用 //我放弃了这种模板方式的线程池,最好不要使用!!!!!!! ThreadPool.h { #ifndef __THREADPO ...

  5. 把sublime添加到右键快捷菜单

    方法一: 新建sublime_addright.reg文件 编辑后双击打开就OK 括号内是sublime安装路径:使用的时候去掉括号 open sublimeText3 是提示文字 Windows R ...

  6. vue 和 react 常用包(插件、组件 或 工具)

    vue 和 react  都可以使用的包(只是 纯 js 功能的包) 1.qs : https://blog.csdn.net/sansan_7957/article/details/82227040 ...

  7. 原生Ajax( XHR 和 Fetch )

    原生Ajax 基本使用的四大步骤,简单易懂 ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页.接下来通过本文给大家介绍Ajax的使用四大步骤,非常不错,感兴趣的 ...

  8. selenium之 文件上传所有方法整理总结

    本文转载“灰蓝”的原创博客.http://blog.csdn.net/huilan_same/article/details/52439546 文件上传是所有UI自动化测试都要面对的一个头疼问题,今天 ...

  9. Future初次使用理解

    当客户端执行方法时,立即返回一个代理对象,此时代理对象没有数据,与此同时开启一个线程去构造真实对象并把真实对象替换掉代理对象(使用set方法).所以就会出现,客户端收到代理对象之后以为执行完了然后执行 ...

  10. 通过adb命令查看SN、CID码等信息

      用ADB命令来查看自己手机的相关硬件以及其他的参数信息,相信许多机友已经早已查看过,而新入门感兴趣的机友可以尝试一下. 运用这些ADB命令可以很直观的查看到你手机上的硬件与软件方面的详细信息. 下 ...