How to create modal box using html, css and jquery?

后端 未结 4 1009
时光取名叫无心
时光取名叫无心 2021-01-07 13:26

How to create modal box using html, css and jquery?


  

        
4条回答
  •  谎友^
    谎友^ (楼主)
    2021-01-07 13:39

    Why don't you use JQuery UI Dialog, its very handy, if you still want to do this using just jquery then you can try below.

    $('#myBtn').click(function(){
        $('.modal-content').show();
        $('body').toggleClass('modalbackground');
    });
    
    $('.modal-content .close').click(function(){
        $('.modal-content').hide();
        $('body').toggleClass('modalbackground');
    });
    .modal-content {
        display: none;
        position: fixed;
    }
    
    .modalbackground {
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.25);
        z-index: 1;
    }
    
    .modal-content {
        width: 33.333%;
        top: 20%;
        left: 33.3333%;
        background: white;
        z-index: 2;
    }
    
    .close{
        cursor: pointer;
    }
    
    
    
    

提交回复
热议问题