css实现android类似的dialog效果

先上图：

原理：用两个div叠加，底层放内容，上层放dialog。

简单易懂，html的标签中带dialog，但是效果如下。

因此还是动手做一个比较好。

HTML

<div id="content" >



//这个div显示网页主要内容
   //设置一个按钮用于显示自定义的dialog
   <button id="loginbutton">显示登录界面</button>





</div>


<!--弹窗-->
<div class="dialog">
    <div  class="dialog1">


      //框框已经显示在正中间，在这个div里设计你的dialog内容



    </div>
</div>

CSS

首先要在body中重叠两个大小，为了设定dialog的中心位置，需要有dialog所在父div的宽高度，则div又需要父body固定宽高。

/*--------------固定body--------*/
html,body{
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;

}
body{
    position: relative;
    overflow: hidden;
}

/*------------网页内容主体div---------*/

/*主体*/
#content{
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow-y:auto;
    overflow-x: hidden;
}
/*------------dialog设置----------------*/
/*--------dialog所在div----------------*/
.dialog{
    position: absolute;
    background:none;
    z-index: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    line-height: 100%;
    transition: all 0.3s linear;
}
/*用于js切换动画**/
.dialogshow{
    background: rgba(0,0,0,0.6);
    z-index: 4;
    opacity: 1;
}

/*--------真正的dialog窗口-------------*/

.dialog1{
    position: absolute;
    width: 300px;
    height: 400px;
    line-height: 400px;
    left: 50%;
    top:50%;
    margin-left: -150px;
    margin-top: -200px;
    border-radius: 10px;
    background-color: white;
    vertical-align: middle;
    text-align: center;
    padding: 20px;
}

JS

//点击按钮显示
$("#loginbutton").click(function () {
    $(".dialog").toggleClass("dialogshow");
});


//点击div时，关闭dialog
$(".dialog").click(function () {
    $(".dialog").toggleClass("dialogshow");

});
父div-窗口部分=窗口背景，即点击窗口背景关闭父div，窗口也随之隐藏。
$(".dialog1").click(function (){
    event.stopPropagation();//阻止点击操作传到父元素上
});

 最后，以上涉及的图片等内容来源网络，仅做学习使用，如有侵权请联系作者删除。