как создавать пользовательские модальное наложения

Question

Обновлено:JsFiddle Link here

Я скрытый DIV .Я это показывает на событие и я использую Jquery Flippy plugin, чтобы повернуть это Див, когда он открыт (как всплывающее окно). Я просто хочу сделать модальный оверлей для фона, когда всплывающее окно показывает. Значит, никто не может щелкнуть по фону, пока всплывающее окно не исчезнет. Не могу использовать диалог jquery.

Фон должен быть размытым, и на фоне не происходит никакого события. Но когда всплывающее окно исчезает, все должно работать нормально. попросите любое уточнение если u need.Thanks!

** обновление: ** кнопка 'click me' и все остальные элементы не следует щелкнуть, когда div открыт. <>

Answer 1

Добавить div class="modalcover" элемент в качестве последнего элемента в документе, а затем создать класс CSS, как показано ниже:

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

Вам может понадобиться, чтобы соответствовать z-index другим zIndexes на вашей странице. Когда вам понадобится обложка, просто установите ее display: block.

Answer 2

Вы можете создать модальный DIV с фиксированной позицией, которые будут отображаться, когда вы всплывающее окно появляется и скрыть его, когда ваше всплывающее окно исчезает

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(); 

});