前端技巧--jquery 实现弹出框 打开与关闭

首先，引入jquery文件

<script type="text/javascript" src="js/jquery-1.11.3.js"></script>

 

第二步：html创建按钮，以及弹出框

按钮

<p id="open111">[打开弹出框]</p>

弹出框（底层滤镜+内容部分+关闭按钮）

<!--底层滤镜-->
<div id="cslj">

　　<!--内容部分-->
　　<div class="qhcq">
   　　 <!--关闭按钮-->
    　　<div class="tcc" id="gbaaa">x</div>
    　　<!--内容-->
    　　<div style="width: 677px; margin: 0px auto;">
    　　 。。。
　　　　</div>

　　</div>

</div>

接下来根据需求设置样式，这里讲下弹出框的样式
滤镜：

position: fixed;//固定定位
left: 0;
top: 0;//距离左边和顶部为0
width: 100%;
height: 100%;//全屏
background: rgba(0,0,0,0.8);//颜色
display: none;//默认隐藏：点击按钮显示

内容：根据自己需求来定

position: fixed;//固定定位

width: 50%;left: 50%;margin-left: -25%;//居中

top: 100px;//距离顶部100px
height: 400px;//高度为400px
background: #fff;//背景颜色

关闭按钮：

position: absolute;//相对于内容部分定位，右上角
top: 0;
right: 0;
width: 50px;
height: 50px;//设置宽高
text-align: center;
line-height: 50px;//居中
font-size: 30px;
cursor:pointer;//鼠标放上去为手
color: #fff;
z-index: 100;

最后一步就是写功能js代码

/*打开弹出框*/
$("#open111").click(function (){
    if($("#cslj").css("display")=="none"){
        $("#cslj").show();
    }
});
/*关闭弹出框*/
$("#gbaaa").click(function (){
    if($("#cslj").css("display")=="block"){
        $("#cslj").hide();
    }
});