弹窗样式（遮罩层）

手写弹窗原理：利用html+css+js，两种方法（js体现）：

一个display的隐藏和显示，一个标签的append()跟remove()。

css代码：

/*遮罩层*/
.black_over{
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #000000c7;
    z-index: 1020;
    -moz-opacity: 0.8;
    filter: alpha(opacity=50);
}
/*弹框*/
.popup{
    position: relative;
    top: 50%;
    left: 50%;
    margin-left: -250px;
    margin-top: -125px;
    width: 500px;
    height: 250px;
    background-color: #F0F5FF;
    z-index: 1099;
    overflow: auto;
    border-radius: 10px;
    border: 1px solid #d3d3d3;
}

html代码：

方法一js代码：

/*打开弹框*/
$(".open_btn").click(function(){
  $(".black_over").css("display","block");
})
/*关闭弹框*/
$(".shut_btn").click(function(){
  $(".black_over").css("display","none");
})

方法二js代码：

/*打开弹框*/
$(".open_btn").click(function(){
  $(".black_over").append('
'+'
');
})
/*关闭弹框*/
$(".shut_btn").click(function(){
  $(".black_over").remove;
})

———— 四川稻城