Выберите элемент окна в JQuery 2

Question

Я пытаюсь закрыть модальное окно, когда пользователь щелкает где-то за пределами модального окна (пример веб-сайта W3C).Тем не менее, я использую JQuery в отличие от простого JS на сайте W3C.$ modal - это объект jquery, содержащий html div, используемый для создания модального

. Я попробовал этот код, который видел в stackoverflow, но безуспешно:

let $window = $('window', opener.document);

window.parent.$window.on('click', function(event){
    if (event.target == $modal){
        $modal.css({display:'none'});
    }
});

Что я попробовал сам:

 let $window = $('window');
 window.on('click', function(event){
        if(event.target == $modal){
            $modal.css({display:'none'});
        }
    }

Смешивание простого JS с JQuery:

 let $window = $('window');
 window.onclick = function(event){
    if(event.target == $modal){
        $modal.css({display:'none'});
    }
}

Я что-то упустил?

Answer 1

Привет, я действительно не знаю, что вы имеете в виду под $ modal, но вот пример управления простым модалом с помощью css и jquery, как вы и просили:

	var modal = $('#myModal'),
  span = $(".close")[0],
  btn = $('#mybtn');
  $(span).on('click',function() {
			$(modal).css("display", "none");
			});
      
  $(document).on('click', function(event) {
				if (event.target == $(modal)[0] ) {
					$(modal).css("display", "none");
				}
			})
      
      	$(btn).on('click', function(e) {
				e.preventDefault();
				$(modal).css("display", "block");
			})

/**
* modal css
**/
/* Modal fondo */
.modal {
	display: none; /* Hidden */
	position: fixed; /*mantener posicion*/
	z-index: 1; /* index top */
	padding-top: 100px; /* inicio del content modal */
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto; /* usar scroll si la pagina excede el tamanio */
	background-color: rgb(0,0,0); /* fondo */
	background-color: rgba(0,0,0,0.4); /*opacidad */
}

/**
* caja modal
*/
.modal-content {
	position: relative;
	background-color: #fefefe;
	margin: auto;
	padding: 0;
	border: 1px solid #888;
	width: 50%;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 0.4s;
	animation-name: animatetop;
	animation-duration: 0.4s
}


@-webkit-keyframes animatetop {
	from {top:-300px; opacity:0}
	to {top:0; opacity:1}
}

@keyframes animatetop {
	from {top:-300px; opacity:0}
	to {top:0; opacity:1}
}


.close {
	color: white;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

.close:hover,
.close:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
}

.modal-header {
	padding: 2px 16px;
	background-color: #4a7ac9;
	color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
	padding: 2px 16px;
	background-color: #4a7ac9;
	color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myModal" class="modal">

	<!--Content-->
	<div class="modal-content">
		<div class="modal-header">
			<span class="close">&times;</span>
			<h2 id="consultaTecnico"></h2>
		</div>
		<div class="modal-body" id="modalForm">
			
				<p>Hello World</p>

		
			</div>
			<div class="modal-footer">
			</div>
		</div>
	</div>
  
  <input type="button" id="mybtn" value="show modal">

Я думаю, ваша проблема была здесь:

if(event.target == $modal)

Ваш модал был сохранен как элемент 0 вашего объекта jquery

Надеюсь, это поможет