手动实现模态框

手动实现模态框

设置一个用于遮罩整个页面的div，其css样式为：

.mask{
    width:100%;
    height:100%;
    display: none;
    position:fixed;
    background:rgba(0,0,0,0.3);
    z-index: 998;
}

js部分代码：

 //模态框frame
   $('.frame').hide();
  $('.purchase').on('click', function() { //点击页面上的某个按钮出现模态框
    $('.frame').fadeIn();
    $('.mask').css('display','block')
    $('body').css('overflow','hidden')//禁止页面滚动
    
});
$('.cancel').on('click', function() {
    $('.frame').fadeOut();
    $('.mask').css('display','none')
    $('body').css('overflow','visible')
});

来源：CSDN

作者：Dimple_z

链接：https://blog.csdn.net/Dimple_z/article/details/104220761