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

Question

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

Open Modal

Answer 1

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;
}

Open Modal


    ×
    
Some text in the Modal..