jQuery之弹出层

大家都知道弹出框，弹出提示、警告用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代码：

<script type="text/javascript">
    //弹出隐藏层
    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';
    };
</script>

css样式在这里不在详细叙述，从jquery代码中可以看出其思想是display的block和none属性，显示弹出层就是讲display的属性置为block，关闭就是将display属性变为none。以下我们来看下控制台中代码的变化：

可以看到控制台的display属性有变化，本质就是这样。

在这里有一个cursor属性我之前没有见到过，百度之后，知道它是光标的样式。拓展了以下光标样式。

pointer	小手
move	十字架
default	默认白色箭头
text	I型

猜你喜欢