Css样式收藏
小于 1 分钟
bootstrap常用样式
固定头部
fixed-top
手机弹窗预览内容
.form-pop{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
top: 0;
left: 0;
position: fixed;
z-index: 999;
display: none;
}
.form-pop-con{
width: 290px;
height: 590px;
background-image: url("/static/images/phone.png");
background-position: center;
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.form-pop-con-con{
width: 255px;
height: 424px;
/*background-color: #0a001f;*/
position: absolute;
top: 97px;
left: 50%;
transform: translateX(-50%);
overflow: auto;
overflow-x: hidden;
overflow-y: scroll;
}
<button type="button" id="open-form-pop" class="layui-btn ">预览</button>
<div class="form-pop">
<div class="form-pop-con">
<div class="form-pop-con-con">
<p>
这里是手机里里面预览的内容
</p>
</div>
</div>
</div>
$('#open-form-pop').on('click',function () {
$('.form-pop').show();
});
$(document).on('click',function () {
$(".form-pop").hide();
});
$(".form-pop-con").on('click',function () {
event.stopPropagation();
});
$("#open-form-pop").on('click',function () {
event.stopPropagation();
});