What to do to by clicking on a particular item pop up the window associated with this itemm?

There are items
<a href="#" class="item_content">
<p>text</p>
</a>

Clicking on them should pop up modal Windows, which are located at the bottom of the page and have no members-parents
<div id="modal">
 <span id="close">X</span>
<p>Lorem</p>
</div>

There is a script
$('.item_content').click(function(evt) {
evt.preventDefault();
 $('#overlay').fadeIn(400, function() {
 $('#modal').css('display', 'block').animate({opacity: 1, top: '50%'}, 200);
});
});
 $('#close, #overlay').click(function() {
 $('#modal').animate({opacity: 0, top: '45%'}, 200, function() {
 $(this).css('display', 'none');
$('#overlay').fadeOut(400);
});
 });

What to do to by clicking on a particular item pop up the window associated with this itemm?
June 10th 19 at 16:29
2 answers
June 10th 19 at 16:31
1) you Need to understand which element is this or that modelka, it is possible for example to add data attribute. For example:

<a href="#" class="js-modal-shower" data-modal-selector="#modal-about">
 <p>show modal about.</p>
</a>


2) Then create a function which shows modelku the selector:
/**
 * param {string} modalSelector
*/
function showModal(modalSelector) {
 var CLOSE_BUTTON_SELECTOR = ".js-close-modal";
 var OVERLAY_SELECTOR = ".js-modal-overlay";
 var OVERLAY_ANIMATION_DURATION_MS = 400;
 var MODAL_ANIMATION_DURATION_MS = 200;

 var $modal = $(modalSelector);
 var $overlay = $modal.find(OVERLAY_SELECTOR);
 var $closeButton = $modal.find(CLOSE_BUTTON_SELECTOR);

 $overlay.fadeIn(OVERLAY_ANIMATION_DURATION_MS, function() {
 $modal.css('display', 'block').animate({
 opacity: 1,
 top: '50%'
 }, MODAL_ANIMATION_DURATION_MS);
});

 $overlay.add($closeButton).one("click", function() {
$modal.animate({
 opacity: 0,
 top: '45%'
 }, MODAL_ANIMATION_DURATION_MS, function() {
$overlay.fadeOut(OVERLAY_ANIMATION_DURATION_MS);
});
});
}


3) Well, actually hang event:

var MODAL_SHOWER_SELECTOR = ".js-modal-shower";

$(MODAL_SHOWER_SELECTOR).on("click", function() {
 var MODAL_SELECTOR_ATTR = "data-modal-selector"
 var $clickedElement = $(this);
 var modalSelector = $clickedElement.attr(MODAL_SELECTOR_ATTR);
showModal(modalSelector);
});


And generally it is better to create a class for modulok and create them something like this:
var aboutModal = new Modal(modalSelector);
aboutModal.show();
aboutModal.shake();
aboutModal.hide();


Because then maybe there will be many additional options, for example download content of modelki via AJA, changing the content of modelki and it will resize depending on the inner content, etc.

In General, jquery is still the meat of course...
June 10th 19 at 16:33
ask ajtishniki, the item, and sootvestvuyuschim modal Windows, that would be when you click on an item there was a window with the same ID. I understand the question?

Find more questions by tags jQueryJavaScript