Modal base on a [href ^ = “# id”]

Question

Tell me, please, how to make it so that once again not to write calls modalki, by type:

$('#button-1').on('click', function() { $('#modal-1').addClass('j-modal--open'); }); $('#button-2').on('click', function() { $('#modal-2').addClass('j-modal--open'); });

and so on, and write something like this:

 var modal__id = $('a[href^="#j-form"]').val(); $('a[href^="#j-form"]').on('click', function() { $(modal__id).addClass('j-modal--open'); });

Where the contents of href are entered into a variable and when clicking on a link, there is an id with the same name and the j-modal class is added to it - open

That is, when you click:

 <a href="#j-form__какой-то-id">Нажать тут</a>

The window opened:

 <div id="j-form__какой-то-id">Контент модалки</div>

Ihor tkachuk ihor tkachuk 1,251 one 6 eleven · Accepted Answer · 2016-03-22T20:33:27

When you click on the link, we take the value of the href attribute, then look for an element with such an id and add a class:

 $('a[href^="#j-form"]').on('click', function() { var id = $(this).attr('href'); $(id).addClass('j-modal--open'); });

Answer 2 · 2016-03-22T20:31:56

HTML:

 <a href="#j-form__какой-то-id" class="js-modal-open">Нажать тут</a> <a href="#j-form__какой-то-другой-id" class="js-modal-open">Нажать тут</a>

Js:

 $('.js-modal-open').on('click', function(e) { e.preventDefault(); $(this.hash).addClass('j-modal--open'); });

Modal base on a [href ^ = “# id”]

2 answers 2

More articles: