jQuery Modals: URL-привязка к определенному модалу (маршрутизация)

0

Я использую plainModal (http://anseki.github.io/jquery-plainmodal/) для отображения набора модалов на странице (http://codepen.io/Frondor/pen/xEBiA)

Все элементы инициализируют модалы без проблем, но мне нужно разделить URL-адрес, например mywebsite.com/#some-modal, чтобы страница загружалась вместе с этим модальным активным (# some-modal).

Вы можете увидеть мой кодфей выше и попытаться просветить меня некоторыми решениями. Я думаю, что мне нужно использовать какой-то скрипт маршрутизатора, но я не имею ни малейшего представления об этом. Мой сайт должен быть чисто статическим, html + js + css.

Хотя этот плагин "plainModal" имеет некоторые опции в отношении метода инициализации, я не понимаю и не могу понять, как это сделать с URL-адресами.

Заранее спасибо!

1 ответ

0

Вы можете проверить URL-адрес хеша, а затем открыть модальный метод на основе хэша:

// does url have a hashtag?
if(window.location.hash) {
      var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
      $('#sample-style').plainModal('open', {
duration: 500}, 'close', {close: $.fn.slideUp});
      console.log(hash);

  } else {
      // No hash found
  }

Прямо сейчас это открывает $('#sample-style') - это тот же самый div, который вы открываете для каждого другого клика. Когда вы добавляете новый контент для каждого элемента, вы можете использовать код $('#'+hash).plainModal('open');//this opens <div id="{hash here}"></div> $('#'+hash).plainModal('open');//this opens <div id="{hash here}"></div> чтобы открыть div на основе хэша.

  • 0
    Спасибо, этот код, похоже, мне нужен, но он не работает. Я обновил кодекс с ним, но ничего не происходит. Я пытаюсь с codepen.io/Frondor/full/xEBiA?#sample-button9 может я ошибаюсь?
  • 0
    Смотрите мое обновление выше. Это не сработало для вас, потому что вы создали хеш div #, который он ищет. Я изменил код выше, чтобы открыть тот же модал, что открывают остальные ваши предметы.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню