手动实现模态框

最新推荐文章于 2023-11-12 19:04:02 发布

原创最新推荐文章于 2023-11-12 19:04:02 发布 · 386 阅读

0 ·

CC 4.0 BY-SA版权

js 同时被 3 个专栏收录

8 篇文章

订阅专栏

css

5 篇文章

订阅专栏

jQuery

4 篇文章

订阅专栏

手动实现模态框

设置一个用于遮罩整个页面的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')
});