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();
    }
});