javaScript 点击按钮弹出页面全屏
需要用到代码:var spread=document.createElement("div");
document.body.appendChild();
哪位高手帮忙解决下 谢谢
点击按钮 弹出另一个层 此层覆盖原来的所有东西 并使其最大化 展开
看看和你的要的是不是一样。有些代码我也是参考别人的。有些地方还是需要改进的。但思路应该就是这个样子的。你可以自己再修改下以适应自己代码的需要。
<html>
<head>
<style type="text/css">
*{
margin:0;
padding:0;
},
#div1{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background-color:#c3daf9;
filter:alpha(opacity=20);
zIndex:101;
},
img{
position:absolute;
left:50%;
top:25%;
width:20px;
height:20px;
border:1px solid red;
text-align:center;
}
body ,input{
font-size:12px;
}
</style>
<script>
function show(){
var div1=document.createElement('div');
div1.setAttribute('id','div1');
var img=new Image();
img.src="wait.gif";
img.alt='点出取消幕布,这是新做一个测试例子';
img.width='20';
img.height='20';
img.style.cursor='pointer';
img.onclick=hidden;
div1.appendChild(img);
document.body.appendChild(div1);
}
function hidden(){
document.body.removeChild($('div1'));
}
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<form>
用户名: <input type="text" ><br>
密 码: <input type="password"><br>
<input type="button" value="提交" onclick="show()">
</form>
</body>
</html>
图片:
微测检测5.10
2023-05-10 广告
<head>
<title>JavaScript 测试</title>
<script type="text/javascript">
window.onload = function() {
document.getElementById('button1').onclick = function() {
var spread=document.createElement("div");
spread.setAttribute('style', 'position:absolute;top:0px;left:0px;width:100%;height:100%;background-color:#EEE;z-index:1000');
spread.innerHTML = '<input type="button" id="button2" value="关闭"/>';
document.body.appendChild(spread);
document.getElementById('button2').onclick = function() {
document.body.removeChild(spread);
}
}
}
</script>
</head>
<body>
<input type="button" id="button1" value="弹出" />
</body>
</html>
还是就是真全屏
