html css好看的提示框,div对话框,js+div+css实现好看的提示框效果(转)
div对话框,js+div+css实现好看的提示框效果(转)
(2012-02-18 20:46:23)
标签:
html
div
css
杂谈
提示窗都越来越人性化了,呵呵,有的时候老板就和你要那么一个框,没办法,急的你焦头烂额,怎么也不知道那个框框是怎么弄出来的,确实,看似简单的一个提示框,背后写的代码却有些复杂,今天周末我就抽时间把这个提示框功能加一个详细的注释发布上来,以供网友们参考。
html代码很简单了,在页面里把下面这句粘上去
点击测试
然后把这段js也粘上去,先看看效果。然后我在讲解一些重要的代码。
function sAlert(str)
{
var msgw,msgh,bordercolor;
msgw=300;//提示窗口的宽度
msgh=200;//提示窗口的高度
titleheight=25 //提示窗口标题高度
bordercolor="#FF3C00";//提示窗口的边框颜色
titlecolor="#D2CECE";//提示窗口的标题颜色
var sWidth,sHeight;
//sWidth=document.body.offsetWidth; //得出当前屏幕的宽
sWidth=document.body.clientWidth;//BODY对象宽度
//sHeight=screen.height;//得到当前屏幕的高
//sHeight=document.body.clientHeight;//BODY对象高度
if (windows.innerHeight && window.scrollMaxY)
{
sHeight = windows.innerHeight + window.scrollMaxY;
}
else if (document.body.scrollHeight >
document.body.offsetHeight)
{
sHeight = document.body.scrollHeight;
}
else
{
sHeight = document.body.offsetHeight;
}//以上得到整个屏幕的高
var bgObj=document.createElement_x_x("div");//创建一个div对象
bgObj.setAttribute('id','bgDiv');//可以用bgObj.id="bgDiv"的方法,是为div指定属性值
bgObj.style.position="absolute";//把bgDiv这个div绝对定位
bgObj.style.top="0";//顶部为0
bgObj.style.background="#777";//背景颜色
bgObj.style.filter="progid:DXImageTransform.Micros
oft.Alpha(style=3,opacity=25,finishOpacity=75)";//i e浏览器透明度设置
bgObj.style.opacity="0.6";//透明度(火狐浏览器中)
bgObj.style.left="0";//左边为0
bgObj.style.width=sWidth + "px";//宽(上面得到的屏幕宽度)
bgObj.style.height=sHeight + "px";//高(上面得到的屏幕高度)
bgObj.style.zIndex = "100";//层的z轴位置
document.body.appendChild(bgObj);
var msgObj=document.createElement_x_x("div")//创建一个div对象
msgObj.setAttribute("id","msgDiv");//可以用bgObj.id="msgDiv"的方法,是为div指定属性值
msgObj.setAttribute("align","center");//为div的align赋值
msgObj.style.background="white";//背景颜色为白色
msgObj.style.border="1px solid " +
bordercolor;//边框属性,颜色在上面已经赋值
msgObj.style.position = "absolute";//绝对定位
msgObj.style.left = "35%";//从左侧开始位置
msgObj.style.top = "30%";//从上部开始位置
msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica,
sans-serif";//字体属性
//msgObj.style.marginLeft = "-225px";//左外边距
//msgObj.style.marginTop =
-75+document.documentElement.scrollTop+"px";//上外边距
msgObj.style.width = msgw + "px";//提示框的宽(上面定义过)
msgObj.style.height =msgh + "px";//提示框的高(上面定义过)
msgObj.style.textAlign = "center";//文本位置属性,居中。
msgObj.style.lineHeight ="25px";//行间距
msgObj.style.zIndex = "101";//层的z轴位置
var title=document.createElement_x_x("h4");//创建一个h4对象
title.setAttribute("id","msgTitle");//为h4对象填加标题
title.setAttribute("align","right");//文字对齐方式
title.style.margin="0";//浮动
title.style.padding="3px";//浮动
title.style.background=titlecolor;//背景颜色
title.style.filter="progid:DXImageTransform.Micros
oft.Alpha(startX=20, startY=20, finishX=100,
finishY=100,style=1,opacity=75,finishOpacity=100); ";
title.style.opacity="0.75";//透明
//title.style.border="1px solid " + bordercolor;//边框
title.style.height="25px";//高度
title.style.font="12px Verdana, Geneva, Arial, Helvetica,
sans-serif";//字体属性
title.style.color="white";//文字颜色
title.style.cursor="pointer";//鼠标样式
title.innerHTML="
href=\"#\">关闭
";//显示的文字
title.οnclick=function()
{
document.body.removeChild(bgObj);//移除遮罩层
document.getElementByIdx_xx_x("msgDiv").removeChild(t
itle);//在提示框中移除标题
document.body.removeChild(msgObj);//移除提示框
}
document.body.appendChild(msgObj);//在body中画出提示框层
document.getElementByIdx_xx_x("msgDiv").appendChild(t
itle);//在提示框中增加标题
var txt=document.createElement_x_x("p");
txt.style.margin="1em 0";//文本浮动
txt.setAttribute("id","msgTxt");//为p属性增加id属性
txt.innerHTML=str;//把传进来的值赋给p属性
document.getElementByIdx_xx_x("msgDiv").appendChild(t
xt);//把p属性增加到提示框里
}
注释我大概都加上了div+csscss,如果你有哪句不懂什么意思的,那只能说明你对js语法不是很了解,很简单,把代码拿到百度上搜索一下就明白什么意思了。
我这里讲几个重要的地方,第一:
//sHeight=screen.height;//得到当前屏幕的高
//sHeight=document.body.clientHeight;//BODY对象高度
if (windows.innerHeight && window.scrollMaxY)
{
sHeight = windows.innerHeight + window.scrollMaxY;
}
else if (document.body.scrollHeight >
document.body.offsetHeight)
{
sHeight = document.body.scrollHeight;
}
else
{
sHeight = document.body.offsetHeight;
}//以上得到整个屏幕的高
可以看到这个变量被赋了好几次,开始我用的前面的赋值,但是后来发现,如果一旦屏幕太长,出现滚动条,上面的高度只是得出当前屏幕的高度,当我们弹出对话框的时候底下的遮罩层,只在第一层遮罩,下面的都不管用,后来经过仔细研究,www.webyuanma.com写出来了下面那几行判断的代码,这样就可以把整个网页都给遮罩上了。
当把上面我们需要的属性都设置好以后,就用这句代码document.body.appendChild(bgObj);把第一个半透明遮罩层给输出到屏幕上。
接下来又定义了一个div,然后还是一堆属性的赋值,然后这两句话很重要
document.body.appendChild(msgObj);//在body中画出提示框层
document.getElementByIdx_xx_x("msgDiv").appendChild(t
itle);//在提示框中增加标题
这是点击关闭按钮以后的处理代码
title.οnclick=function()
{
document.body.removeChild(bgObj);//移除遮罩层
document.getElementByIdx_xx_x("msgDiv").removeChild(t
itle);//在提示框中移除标题
document.body.removeChild(msgObj);//移除提示框
}
都很简单了,就是移除,关闭就行了。
转自:http://www.it300.net/Contents.asp?id=
分享:
喜欢
0
赠金笔
加载中,请稍候......
评论加载中,请稍候...
发评论
登录名: 密码: 找回密码 注册记住登录状态
昵 称:
评论并转载此博文
发评论
以上网友发言只代表其个人观点,不代表新浪网的观点或立场。
html css好看的提示框,div对话框,js+div+css实现好看的提示框效果(转)相关推荐
- js和css被屏蔽了,拦截器 Filter ,js、css、image等静态资源不被拦截解决方案
方案一: web.xml配置文件拦截范围缩小 ,没有必要 /*的配置拦截项目下所有资源. Login com.ssm.crm.filter.LoginFilter Login /* 修改如下: Log ...
- 如何压缩css代码,在开发中怎么压缩js和css?有哪些办法?
在开发的时候我们会选择将自己的代码进行压缩和打包,那么对于"在开发中怎么压缩js和css?有哪些办法?"这个问题小编为带来了一些干货. 对于压缩 js 与 css,我们一般是使用在 ...
- 单选框radio赋值 js 及Ajax,layui radio性别单选框赋值方法
html 性别 js layui.use('form', function () { var $ = layui.jquery, form = layui.form; $.ajax({ type: & ...
- 优雅的使用Js或CSS处理文本的截断与展示
之前遇见一个问题,就是处理文本截断,然后可以手动切换文本是全展示和手动展示,因为这个问题比较常见,而且其实现方式有多种,于是决定总结一下,与读者分享. 前言 首先,我们看这样一个场景: 展开更多 其h ...
- JavaScript使用localStorage缓存Js和css文件
对于WebApp来说,将js css文件缓存到localstorage区可以减少页面在加载时与HTTP请求的交互次数,从而优化页面的加载时间.特别是当移端信号不好高延迟时优化效果还是很显见的 下面的代 ...
- js和css压缩工具
封装的.net命令行的js,css含有自动修复功能的工具: js或css压缩,如果原文件是当前路径把home.exe.xml配置改成:<basePath>./</basePath&g ...
- JS使用localStorage缓存Js和css文件
代码下载: http://download.csdn.net/download/qq_29132907/10261798 目录结构 将jquery和公共样式缓存到localStorage,可以减少Ht ...
- php js对话框,JavaScript_js弹出框、对话框、提示框、弹窗实现方法总结(推荐),一、JS的三种最常见的对话框- phpStudy...
js弹出框.对话框.提示框.弹窗实现方法总结(推荐) 一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ==================== ...
- 弹出框之对话框和提示框,可共用代码
弹出框: //对话框,title是标题文字,content是提示框内容,test是一个function(点击确定按钮触发的事件) function dialogBox(title,content,te ...
最新文章
- OpenAI与GitHub联手推出AI代码生成工具,比GPT-3更强大
- 供应商主数据屏幕增强
- Linux配置ssh无密码验证,rsync
- 开源mindmap_Java开发人员访谈的MindMap
- Effective C++_笔记_条款06_若不想使用编译器自动生成的函数,就该明确拒绝
- vue-cli+webpack打包配置
- java实现动态规划求解给定矩阵的和最大的子数组(矩阵中数字正负均存在)
- linux桌面 英文,Linux桌面最好看的40+种英文Sans字体(2019版)
- 抖音电影视频剪辑——电影版权问题
- 我的世界服务器皮肤文件在哪里,我的世界皮肤展开文件,皮肤站皮肤保存在哪个文件夹...
- 【FPGA教程案例89】编译码2——使用vivado核实现RS信道编译码
- 一些《集成电路与光刻机》笔记
- html 字体图标转换工具,HTML5 webfont字体图标的使用
- jsd 多线程与socket网络通信
- NEX让人们对vivo刮目相看,这个互联网巨头出了一份力
- 【2020年高被引学者】 陶大程 悉尼大学
- 【嵌入式系统基础第九周作业】---LED呼吸灯
- msr和esp分区有什么用
- 相机标定与矫正(总结)
- unity图片变成马赛克如何取像素并改变颜色_聊聊 2D 游戏的像素化中的问题