Jak utworzyć modalne podręczne przy użyciu JavaScript i CSS

Question

Właściwie dwa pytania:

• Jak utworzyć modalne okienko z kolorem tła szarości?
• Muszę również utworzyć dla koloru tła okładki tylko do samego stołu. Nie na całą stronę.

Jak zrobić to za pomocą javascript i css?

Answer 1

Oto kod HTML, który prawdopodobnie powinien zostać wstawiony z JS, a style powinny znajdować się w zewnętrznym arkuszu stylów.

<div style="background: gray; width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px" id="modal">I'm a modal</div> 

Następnie można wykorzystać jQuery do wyświetlenia.

$('a.modal').bind('click', function(event) { 
    event.preventDefault(); 
    $('#modal').fadeIn(800); 
}); 

To dopiero początek, będziesz chciał się z tego uczyć i na nim oprzeć. Na przykład skrypt powinien sprawdzić is(':hidden') i pokazać, a jeśli nie, to fadeOut(800) lub podobny.

Answer 2

Używam tego na masce, który znajduje się na górze ekranu

.Mask { 
    display: none; 
    width: 100%; 
    height: 100%; 
    z-index: 9000; 
    padding: 0px; 
    margin: 0px; 
    background: transparent url(http://i.imgur.com/0KbiL.png); 
    position: fixed; 
    top: 0px; 
    overflow: hidden; 
}