php自定义弹窗,自定义弹窗Style样式
由于系统默认alert弹出窗口不能自定义样式,有可能不符合网站的风格,虽然网上应该有很多这样的JS
但是还是自己写的比较放心,顺便练习一下对DOM的操作
支持IE6下的SELECT不能遮罩的问题,谷歌支持圆角,IE6下就比较丑了,四四方方的,不过可以自定义自己喜欢的样式
听取建议后,修改了position:fixed, IE6下用hack处理了。
点击看效果:
所需CSS:
使用方法,直接调用函数,传递所需定义的信息,支持定义是否有取消键:
alertMsg(msg, mode)
//mode为空,即只有一个确认按钮,mode为1时有确认和取消两个按钮
函数代码:添加了一个获取窗口尺寸的函数,又长长了很多,可以把获取窗口的尺寸另外立一个函数放公共库里面,这里只是为了方便演示,写到一个函数里面
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 = '确定';
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 = '取消';
btn2.onclick = function () {
document.body.removeChild(alertBox);
document.body.removeChild(shadowDiv);
return false;
};
alertBox.appendChild(btn2);
}
document.body.appendChild(alertBox);
}
php自定义弹窗,自定义弹窗Style样式相关推荐
- vue3 antd项目实战——Modal弹窗自定义遮罩 (利用maskStyle属性自定义遮罩样式)
vue3 antd项目实战--Modal弹窗自定义遮罩 maskStyle 知识回调 场景复现 关于mask遮罩的API属性 利用maskStyle属性自定义遮罩样式 知识回调 文章内容 文章链接 v ...
- Vue自定义指令实现弹窗拖拽,四边拉伸及对角线拉伸
Vue自定义指令实现弹窗拖拽,四边拉伸及对角线拉伸 引言 页面布局 drag.js文件 弹窗拖拽实现及边界限制 鼠标指针悬停样式 四边拉伸及对角线拉伸 拉伸干涉 引言 近期公司vue前端项目需求:实现 ...
- Android自定义半透明背景弹窗非popwindow/dialog超简单任意编写!
前日,一个朋友问我有没有好看的弹窗,功能不需要太难,说了一点需求,图: 然后我就写了个Demo给他. Activity的弹窗各种各样.很早就有,但是有的太过于单调,样式也不好看,有的自定义起来非常繁琐 ...
- vue自定义百度地图弹窗
vue自定义百度地图弹窗 1.全局注册方式 1.1 引入百度地图和百度地图自定义弹窗js(自己去百度api里面下载就可以了) <!DOCTYPE html> <html lang=& ...
- php自定义弹窗,微信小程序 弹窗自定义的代码
这篇文章主要介绍了微信小程序 弹窗自定义实例代码的相关资料,有时候做开发项目的时候需要根据客户需求更改原系统的组件,这里就对小程序中弹窗进行更改,需要的朋友可以参考下 微信小程序 弹窗 首先wxml代 ...
- swiper6.0改造 “翻页按钮”:自定义style样式和position - 案例篇
文章目录 swiper6.0改造 "翻页按钮":自定义style样式和position(含效果图.代码.使用手册) 需求场景 · 描述如下: 效果图 · gif 动画: 注意事项: ...
- Python mplfinance库④ 如何自定义style样式
使用mplfinance的时候,我们通过设定参数style,可以得到多种多样的图像风格.style参数常用的内置样式有:'binance', 'blueskies', 'brasil', 'charl ...
- Android踩坑日记:自定义水平和圆形ProgressBar样式
自定义水平和圆形ProgressBar样式 1.自定义水平ProgressBar样式 ProgressBar分为两种,我们能明确看到进度,不确定的就是不清楚.不确定一个操作需要多长时间来完成,这个时候 ...
- 伪类::selection自定义文本选中时的样式(CSS3样式),CSS3的word-break单次换行
1.::selection CSS3伪类自定义文本选中时的样式 有的人在浏览网页时,喜欢一边选中文本一边阅读.在windows环境下,正常的文本选中应该是深蓝色背景白色文本的样式.那么想要修改文本选中 ...
- 数据科学 IPython 笔记本 8.14 自定义 Matplotlib:配置和样式表
8.14 自定义 Matplotlib:配置和样式表 原文:Customizing Matplotlib: Configurations and Stylesheets 译者:飞龙 协议:CC BY- ...
最新文章
- nginx图片过滤处理模块http_image_filter_module安装配置笔记
- CoBigICP:一种基于相关熵以及双向匹配的鲁棒且准确的配准方法
- python基础知识选择题-99道经典练习题助你全面掌握python基础知识,附技巧答案...
- VTK修炼之道33:边缘检测_Sobel算子
- 高德深度信息接入的平台化演进
- 2017计算机软件考试试题,2017年计算机应用考试试题含答案.doc
- 让 jQuery UI draggable 适配移动端
- SSM框架——使用MyBatis Generator自动创建代码
- 微信支持环信_环信客户互动云v5.39已发布:支持微信小程序接入
- html5 页面答题算分,JavaScript实现答题评分功能页面
- python定时爬取数据_python实现scrapy爬虫每天定时抓取数据的示例代码
- 面试准备每日五题:C++(二)——mallocnew、宏、volatile、constvolatile、(a)和(a)
- Python中的len函数
- 求一个容器的最值的索引_初中数学:一道几何好题,学会“胡不归问题”动点最值解题方法...
- CSS/HTML/JS实现图片轮播
- mapgis注释文字文件完整转换成arcgis格式注记shp 2019视频教程
- 2020校招Java笔试题
- 金蝶服务器选项没有账套信息,金蝶财务软件帐套属性设置保存和帐套启用报错的解决方法...
- 5分钟教你做一个WebView广告过滤器
- java多模块项目脚手架:Spring Boot + MyBatis 搭建教程
热门文章
- Java学习笔记一和前言
- 缓存之EHCache
- 彻底解决网络爬虫遇到的中文乱码问题
- JavaScript的运动 —— 缓冲运动及其应用篇
- 【最详细】数据结构(C语言版 第2版)第二章课后习题答案 严蔚敏 等 编著
- HashMap中hash函数怎么是实现的?
- android 获取数组大小,看得见的数据结构Android版之数组表(数据结构篇)
- redis key存在则删除_Redis加锁的几种实现
- 三层聚合实验的注意事项
- 在U盘上运行Win8!使用 Windows To Go 制作便携的 Win8 U盘/移动硬盘教程 (视频)