how to create custom modal overlay

Question

Updated : JsFiddle Link here

I have a hidden div .I shows it on an event and i am using Jquery Flippy plugin to rotate this div when it open (as a popup). I just want to make modal overlay for background when popup shows. Means no one can click in background untill the popup disappear. Cant use jquery dialog.

Background should be blur and no event happen on background.but When popup div disappear then everything should work normal. ask for any clearification if u need.Thanks!

**update : **button 'click me' and all other elements should not be clicked when div is open. <>

Answer 1

Add a div class="modalcover" element as a last element in a document, then create a CSS class like below:

.modalcover {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    opacity: 0.0;
    z-index = 10000;
    background-color: #000000;
    display: none;
}

You may need to fit z-index to other zIndexes in your page. When you need the cover, just set its display: block .

Answer 2

You can create a modal DIV with position fixed to be displayed when you popup shows up and hide it when your popup disappears

CSS:

<style type="text/css">
    .modal {
        position: fixed;
        top: 0;
        left: 0;
        background: #000;
        opacity: 0.6;
        display: none;
        z-index: 100; /* play with this param to show the modal behind the popup and above the page content */
    }
</style>

SCRIPT:

$(function() {

    function Modal() {
        this.$el = $('<div class="modal" />');
        $('body').append(this.$el);
        this.$el.on('click', this.preventEvent.bind(this));

        $(window).on('resize', this.resizeModal.bind(this));
    }

    Modal.prototype.show = function() {
        this.$el.css('width', $(window).width() + 'px');
        this.$el.css('height', $(window).height() + 'px');
        this.$el.show();
    }

    Modal.prototype.hide = function() {
        this.$el.hide();
    }

    Modal.prototype.resizeModal = function() {
        this.$el.css('width', $(window).width() + 'px');
        this.$el.css('height', $(window).height() + 'px');
    }

    // prevent background event
    Modal.prototype.preventEvent = function(e) {
        e.preventDefault();
        e.stopPropagation();
    }

    var modal = new Modal();

    // when you are showing your popup - modal.show();
    // when you are hiding your popup - modal.hide();

});