大家都知道弹出框,弹出提示、警告用alert、window都可以实现。但是如果让你点击一个事件后,弹出一个小小的界面,而不是一个提示框。我们应该如何实现?在我学习了jquery之后,发现jquery可以实现。但具体过程我还有点模糊,因此学习了别人的代码以及思路。
效果图如下:
通过效果图我们可以看到,第一个界面只有一个简单的点击弹出层的提示按钮,点击后弹出层弹出,点击关闭和阴影层都会回到最初的界面。
html代码:
<body>
<input id="Button1" type="button" value="点击弹出层" onclick="ShowDiv('MyDiv','fade')"/>
<div id="fade" class="background" onclick="CloseDiv('MyDiv','fade')">
</div>
<div id="MyDiv" class="white-content">
<div style="text-align: right;cursor: default;height: 20px;" >
<span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">关闭</span>
</div>
<img src="img/man1.jpg"/>
</div>
</body>
css代码:
<style>
.background{
position: absolute;
display: none;
width: 100%;
top: 0%;
left: 0%;
height: 100%;
background-color: black;
opacity: 0.7;
filter: alpha(opacity=70);
z-index: 1001;
}
.white-content{
display: none;
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
border: 16px solid lightblue;
background-color: white;
overflow: auto;
z-index: 1002;
}
img{
width: 100%;
height: 100%;
top: 0%;
left:0%;
position: relative;
}
jQuery代码:
//弹出隐藏层
function ShowDiv(show_div, bg_div) {
document.getElementById(show_div).style.display = 'block';
document.getElementById(bg_div).style.display = 'block';
var bgdiv = document.getElementById(bg_div);
bgdiv.style.width = document.body.scrollWidth; //无滚动轴宽度
$("#" + bg_div).height($(document).height());
};
//关闭弹出层
function CloseDiv(show_div, bg_div) {
document.getElementById(show_div).style.display = 'none';
document.getElementById(bg_div).style.display = 'none';
};
css样式在这里不在详细叙述,从jquery代码中可以看出其思想是display的block和none属性,显示弹出层就是讲display的属性置为block,关闭就是将display属性变为none。以下我们来看下控制台中代码的变化:
可以看到控制台的display属性有变化,本质就是这样。
在这里有一个cursor属性我之前没有见到过,百度之后,知道它是光标的样式。拓展了以下光标样式。
pointer | 小手 |
move | 十字架 |
default | 默认白色箭头 |
text | I型 |