Сделать все незаменимым, но один элемент

Question

Я создаю всплывающее окно. И когда он появится, я хочу, чтобы все было незаметно, но это всплывающее окно. Вот некоторые паршивый пример кода:

<div class="content-unclickable"> 
    <div class="popup-clickable">some info and buttons</div> 
</div> 

Answer 1

$('content-unclickable *').on('mousedown', function(e){ 
    e.preventDefault(); 
    e.stopPropagation(); 
    return false; 
}); 

Вы можете вернуть ложь и использовать для e.preventDefault(); предотвратить поведение по умолчанию и e.stopPropagation(); все детали будут остановить распространение волн

Answer 2

Я полагаю, вы хотите, чтобы отобразить накладку над страницы который содержит некоторые элементы.

Проверьте следующий пример:

Во-первых, если вы нажмете на «элемент страницы» предупреждение всплывает. Нажмите на «открытом всплывающем окне», и вы хотите иметь возможность нажать «элемент страницы»:

$('#open-popup').on('click', function() { 
 
    $('#popup').show(); 
 
}); 
 
$('#page').on('click', function() { 
 
    alert('you clicked on page!'); 
 
}); 
 
$('#popupElem').on('click', function() { 
 
    alert('you clicked onside popup!'); 
 
});

#popup { 
 
    position:fixed; 
 
    top:0; 
 
    left:0; 
 
    right:0; 
 
    bottom:0; 
 
    background-color:rgba(0,0,0,0.5); 
 
    z-index:100; 
 
    display:none; 
 
} 
 
.popup-inner { 
 
    position:fixed; 
 
    width:200px; 
 
    height:150px; 
 
    top:50%;; 
 
    left:50%; 
 
    margin-top:-75px; 
 
    margin-left:-100px; 
 
    background-color:#ececec; 
 
    z-index:110; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<span id="page">page element (click on me!)</span><br /> 
 
<span id="open-popup">open popup!</span> 
 
<div id="popup"> 
 
    <div class="popup-inner">some info and buttons <b id="popupElem">click</b></div> 
 
</div>