基于javascript,基于精益创业思想可将创业分为

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

基于JavaScript如何制作遮罩层对话框

#lid{

width: 100%;

height: 100%;

background: black;

opacity: 0.5;

position: fixed;

top: 0;

left: 0;

color: white;

z-index: -1;

display: none;

}

#top{

background: white;

width: 500px;

height: 200px;

margin: 100px auto;

border-radius: 10px;

display: none;

html

div正常显示文字位置/div

button显示遮罩层/button

div id="lid"/div

div id="top"这是遮罩层显示文字位置/div

oBtn = document.querySelector('button');

oLid = document.getElementById('lid');

oTop = document.getElementById('top');

oBtn.onclick = function(){

oLid.style.display = 'block';

oTop.style.display = 'block';

}

相关问答

Q1: 基于javascript实现动态显示当前系统时间

本文实例讲解了javascript实现动态显示当前系统时间的详细代码，具体内容如下

（1）时间日期信息，应该在一个div中来显示

（2）定时器：每隔一秒再次访问系统时间，window对象的setTimeout()

（3）时钟显示的时机(事件)：当网页加载完成后才显示，事件onload

（4）如何将

时间日期信息

写入到指定的div中，DOM对象中的innerHTML属性

效果图：

具体代码：

html

head

meta

http-equiv="Content-Type"

content="text/html;

charset=utf-8"

title图片上传本地预览/title

style

type="text/css"

#preview{width:260px;height:190px;border:1px

solid

#000;overflow:hidden;}

#imghead

{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}

/style

script

type="text/javascript"

//图片上传预览

IE是用了滤镜。

function

previewImage(file)

{

var

MAXWIDTH

260;

var

MAXHEIGHT

180;

var

div

document.getElementById('preview');

(file.files

file.files[0])

{

div.innerHTML

='img

id=imghead';

var

img

document.getElementById('imghead');

img.onload

function(){

var

rect

clacImgZoomParam(MAXWIDTH,

MAXHEIGHT,

img.offsetWidth,

img.offsetHeight);

img.width

rect.width;

img.height

rect.height;

img.style.marginLeft

rect.left+'px';

img.style.marginTop

rect.top+'px';

}

var

reader

new

FileReader();

reader.onload

function(evt){img.src

evt.target.result;}

reader.readAsDataURL(file.files[0]);

}

else

//兼容IE

{

var

sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';

file.select();

var

src

document.selection.createRange().text;

div.innerHTML

'img

id=imghead';

var

img

document.getElementById('imghead');

img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src

src;

var

rect

clacImgZoomParam(MAXWIDTH,

MAXHEIGHT,

img.offsetWidth,

img.offsetHeight);

status

=('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);

div.innerHTML

"div

id=divhead

style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'/div";

}

function

clacImgZoomParam(

maxWidth,

maxHeight,

width,

height

){

var

param

{top:0,

left:0,

width:width,

height:height};

if(

widthmaxWidth

heightmaxHeight

)

{

rateWidth

width

maxWidth;

rateHeight

height

maxHeight;

if(

rateWidth

rateHeight

)

{

param.width

maxWidth;

param.height

Math.round(height

rateWidth);

}else

{

param.width

Math.round(width

rateHeight);

param.height

maxHeight;

}

param.left

Math.round((maxWidth

param.width)

2);

param.top

Math.round((maxHeight

param.height)

2);

return

param;

}

/script

/head

body

div

id="preview"

img

id="imghead"

width=100

height=100

border=0

src='%=request.getContextPath()%/images/defaul.jpg'

/div

input

type="file"

onchange="previewImage(this)"

/body

/html

Q3: javascript基于什么标准

JavaScript 是属于网络的脚本语言，ECMA-262 是 JavaScript 标准的官方名称。

JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中（该浏览器已停止更新），并于 1997 年被 ECMA（一个标准协会）采纳。

希望对你有帮助，望采纳！

Q4: 基于JavaScript判断浏览器到底是关闭还是刷

刷新：

//对于ie，谷歌，360：

//页面加载时只执行onload

//页面刷新时，刷新之前执行onbeforeunload事件，在新页面即将替换旧页面时onunload事件，最后onload事件。

//页面关闭时，先onbeforeunload事件，再onunload事件。

//对于火狐：

//页面刷新时，只执行onunload；页面关闭时，只执行onbeforeunload事件

刷新的时候先onbeforeunload，然后取服务端请求数据，在新页面即将替换旧页面时onunload事件，而页面关闭时，先onbeforeunload事件，再立即onunload事件。那么在刷新的时候，onbeforeunload与onunload之间的时间肯定比关闭的时候时间长，经过测试确实如此。

关闭：

使用onunload或onbeforeunload可以监听浏览器关闭事件，但是无法区分关闭与刷新。以下js代码可以部分监听关闭浏览器的事件！

//鼠标相对于用户屏幕的水平位置 - 窗口左上角相对于屏幕左上角的水平位置 = 鼠标在当前窗口上的水平位置

var n = window.event.screenX - window.screenLeft;

//鼠标在当前窗口内时，nm，b为false；鼠标在当前窗口外时，nm，b为true。20这个值是指关闭按钮的宽度

var b = n document.documentElement.scrollWidth-20;

//鼠标在客户区内时，window.event.clientY0；鼠标在客户区外时，window.event.clientY0

if(b window.event.clientY 0 || window.event.altKey || window.event.ctrlKey){

关闭浏览器时你想做的事

}else if(event.clientY document.body.clientHeight || event.altKey){

关闭浏览器时你想做的事

}