| denis_kontarev |
12.10.2019 12:02 |
Всплывающее окно по клику
Друзья, есть код работы всплывающего окна по клику. Есть много table с одним классом, при клике, открываются сразу все окна, как сделать чтоб при нажатии на "Открыть popup", то открывать всплывающее окно именно того table на которое мы нажали, а не все сразу?
<a class="popup-open" href="#">Открыть popup</a>
<div class="popup-fade">
<div class="popup">
<a class="popup-close" href="#">Закрыть</a>
<table class="one">text.......</table>
<table class="one">text.......</table>
<table class="one">text.......</table>
<table class="one">text.......</table>
</div>
</div>
<style>
.popup-fade {
display: none;
}
.popup-fade:before {
content: '';
background: #000;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.7;
z-index: 9999;
}
.popup {
position: fixed;
top: 20%;
left: 50%;
padding: 20px;
width: 360px;
margin-left: -200px;
background: #fff;
border: 1px solid orange;
border-radius: 4px;
z-index: 99999;
opacity: 1;
}
.popup-close {
position: absolute;
top: 10px;
right: 10px;
}
</style>
<script src="https://yandex.st/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function($) {
$('.popup-open').click(function() {
$('.popup-fade').fadeIn();
return false;
});
$('.popup-close').click(function() {
$(this).parents('.popup-fade').fadeOut();
return false;
});
$(document).keydown(function(e) {
if (e.keyCode === 27) {
e.stopPropagation();
$('.popup-fade').fadeOut();
}
});
$('.popup-fade').click(function(e) {
if ($(e.target).closest('.popup').length == 0) {
$(this).fadeOut();
}
});
});
</script>
|