Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.10.2019, 12:02
Аспирант
Отправить личное сообщение для denis_kontarev Посмотреть профиль Найти все сообщения от denis_kontarev
 
Регистрация: 01.04.2018
Сообщений: 43

Всплывающее окно по клику
Друзья, есть код работы всплывающего окна по клику. Есть много 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>

Последний раз редактировалось denis_kontarev, 12.10.2019 в 12:06.
Ответить с цитированием
  #2 (permalink)  
Старый 12.10.2019, 13:37
Аспирант
Отправить личное сообщение для denis_kontarev Посмотреть профиль Найти все сообщения от denis_kontarev
 
Регистрация: 01.04.2018
Сообщений: 43

$(".iopenmodal").on('click',function(){
var myid = $(this).attr('data-my-id');
$.get('someurl?id='+myid,function(otvetservera){
$('#mymodal').html(otvetservera).css('display','block');
})
});


Вот еще нашел в интернете, допустим мы присвоили каждой таблице уникальный id и кнопке, как это добавить в начальный код.
Ответить с цитированием
  #3 (permalink)  
Старый 12.10.2019, 14:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,830

denis_kontarev,
Ответить с цитированием
  #4 (permalink)  
Старый 12.10.2019, 14:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,830

denis_kontarev,
https://javascript.ru/forum/misc/553...tml#post367958
искать открывашка и модальное по форуму, сотни вариантов есть!!!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Удалить всплывающее окно SolomonRei Элементы интерфейса 1 04.12.2018 00:29
Как сделать всплывающее окно по центру экрана? jslgogo Общие вопросы Javascript 8 26.08.2014 08:18
Всплывающее окно Rooner jQuery 1 23.04.2014 12:15
Ячейка как ссылка (всплывающее окно на jquery)? Алекс-ми Javascript под браузер 0 17.05.2013 17:58
Не могу запустить всплывающее окно не по клику. Danya24rus Общие вопросы Javascript 0 12.08.2011 12:41