2016-07-26 4 views
3

С моей точки зрения, кнопки используются для выполнения функций, а ссылки используются для перемещения пользователя на другую страницу. Но что лучше всего в плане открытия и закрытия модального?Доступно ли использовать <button> или <a>, чтобы открыть/закрыть модальный?

<a id="testModal" href="#">Open Modal</a> 

или

<button id="testModal">Open Modal</button> 

ответ

8

<button>

Изменение <a href="#"> к <button> и поставить обработчик событий на нем.

Некоторые больше контекста, на котором элементы принадлежит где ....

Несет ли Control Me на другую страницу? Используйте Якорь

Если при нажатии прослушивается, или активируется с помощью клавиатуры или голоса (или вставить новый способ взаимодействия здесь), пользователь взбитым другой URL (в том числе якорь на той же странице), а затем использовать <a href="[URL]"> , Убедитесь, что вы используете атрибут href и что он имеет реальный URL-адрес, а не «#» (в противном случае вы, вероятно, полагаетесь на JavaScript, который вовсе не нужен для гиперссылки). Если href указывает только на «#», вы, вероятно, ошибаетесь. Если он указывает на именованный якорь как часть ваших усилий по прогрессивному усилению, то это абсолютно справедливо.

Выполняет ли контроль что-то на текущей странице? Используйте кнопку

Если при активации пользователь не перемещается со страницы (или на якорь внутри страницы), но вместо этого отображается новое представление (окна сообщений, изменения в макете и т. Д.), , затем используйте <button>.Хотя вы можете использовать <input type="button">, более вероятно, что вы столкнетесь с конфликтами с уже существующими стилями и последующими разработчиками (такими как я).

Является ли элемент управления формой формы? Использовать Отправить

Если после активации информация, введенная пользователем (либо путем ввода вручную, либо путем выбора элементов на экране), отправляется обратно на сервер, а затем используется <input type="submit">. Это лучше жить в пределах <form>. Если вам нужно больше управления стилем или нужно вставлять больше, чем просто текстовую строку, используйте вместо этого <button type="submit">.

клавиатуры Соображения

Придумайте пользователей клавиатуры на мгновение. Гиперссылку можно запустить, нажав клавишу ввода. Но настоящую кнопку можно запустить, нажав клавишу ввода или пробел. Когда гиперссылка имеет фокус и пользователь нажимает клавишу пробела, страница будет прокручивать один экран. Если больше нет прокрутки, пользователь просто ничего не испытывает. Учитывая набор элементов интерфейса, которые выглядят одинаково, если некоторые работают с пробелом, а некоторые нет, вы не можете ожидать, что пользователи будут очень уверены в том, как ведет себя страница.

Я думаю, что также стоит упомянуть, что события, вызванные пробелом, срабатывают только при отпускании ключа, тогда как с помощью клавиши «Ввод» будет срабатывать событие, как только вы нажмете клавишу вниз (до ее отпускания).

1

Я думаю, что есть два возможных случая.

  1. Ваше содержание только визуально скрыты в странице или видимым в странице (может быть прочитан чтения с экрана) и может быть хэш связаны между собой, а затем якорь тег может быть уместным (этот случай не так часто, например: используйте случай, если вы выделяете абзац или изображение на странице как модальный).

  2. Практически во всех других случаях ваш модальный файл загружается на одну страницу и никоим образом не перемещается с использованием ссылки url (кроме как через ajax для доступа к данным, которые, возможно, не учитываются). Следовательно, это настраиваемая функциональность, и кнопка является подходящим выбором.

1

Сортировка по определению - это диалоговое окно, которое будет отображаться в текущем окне. Вы действительно не покидаете окно, это просто временно недоступно. Как только вы закончите диалог, вы обычно возвращаетесь к окну. Поэтому в этом отношении вы не хотите использовать ссылку, потому что не собираетесь на другую страницу. Вы выполняете некоторые действия на текущей странице. Используйте кнопку.

При использовании устройства чтения с экрана я часто приводил список ссылок (Ins + F7 в JAWS), чтобы увидеть, на каких страницах я могу ссылаться. Я также приведу список кнопок (Ctrl + Ins + B), чтобы узнать, какие действия доступны на странице. Я ожидаю, что действие приведет к появлению модального диалога в списке кнопок.

 Смежные вопросы

  • Нет связанных вопросов^_^