Как правильно сделать ссылку для вызова модального окна?

Question

[lavezzi1]

Нужно сделать ссылку которая вызывает окно. Какой тег использовать? span, div, или button стилизованный под ссылку? Что будет семантично и верно?

Answer 1

[Dartess]

Никогда НЕ используйте ссылки для чего-либо, кроме перехода по ссылке, и уж тем более НЕ используйте onclick="return false". Не нарушайте семантику верстки. Ссылка должна ссылаться. А экшн на открытие модалки можно повесить на любой элемент - будь то span или div, а ещё лучше - button. Расположение button вне form является вполне валидным, комментарий выше неверен. Использование button даст ещё одно преимущество - нативное переключение на кнопку по tab.

Comments

[lavezzi1]

Ок. Получается нормальная практика если я кнопку застилизую под ссылку?

[Dartess]

lavezzi1: на самом деле, нет. То, что выглядит как ссылка - должно быть ссылкой. Хорошая практика дизайна - это когда текстовые ссылки (элементы, по которым идёт переход на другую страницу) рисуются подчеркнутыми спшлошной линией, а текстовые активные элементы (по которым идёт переход в пределах текущей страницы по якорям, по которым открываются модалки, по которым переключаются вкладки /если они не стилизованны особенно/) - рисуются подчеркнутыми пунктиром. То есть кнопку можно сделать inline например и навесить туда border-bottom: 1px solid dashed.

[lavezzi1]

Dartess: Спсасибо огромное за понятное, развернутое пояснение. Посоветуйте, пожалуйста книги по ui\ux\web-design?

[Dartess]

lavezzi1: я только верстаю, сорри)

Answer 2

[Дмитрий Ковальский]

да можете и ссылку.в чем проблема?

<a href=# onclick= return false(чтобы не произошел переход)></a>

Тут главное сделать так чтобы ссылка не отработала как ссылка. А для этого инструментов хватает.

Answer 3

[Виталий Инчин ☢]

Зависит от того, что в этом окне. Если какая-то другая страница, то я бы сделал в таком духе:

<a href="/page">Открыть окно</a>

document.querySelector("a").onclick = function(e){ 
  e.preventDefault(); 
  window.open(this.href); 
}

Чтобы поисковики так же могли спарсить ссылку на эту страницу, а пользователи без JS, открыть ее.

А иначе, я бы использовал span, но я же не знаю что у вас там да как. С семантической стороны единственный ньюанс - использовать button нужно только в пределах формы.