Модальное отображение хэштега Zurb Foundation в URL-закладке или обратной ссылке

Я использую ZURB Foundation 5 вместе с их JS-скриптом «Reveal Modal». Что я хотел бы сделать, так это иметь возможность отображать модальное отображение по хэштегу URL-адреса в URL-адресе.

Триггер

<a href="#bits-n-bobs" data-reveal-id="bits-n-bobs">Bits and Bobs</a></li>

Показать модальное окно

<div id="bits-n-bobs" class="reveal-modal" data-reveal>
    <h2>Bits and Bobs</h2>
    <p>Basil fawlty ron burgundy kris kristofferson.</p>
    <a class="close-reveal-modal">&#215;</a>
</div>

Хотя хэштег не требуется в href, причина этого заключается в том, что когда используется .no-js, display:none становится display:block, что означает, что ссылки меньше всего что-то делают, когда не обнаружен java-скрипт.

Решение, которое мне нужно

Теперь, поскольку я использую хэш-теги в <a href>, URL-адрес обновляется при открытии модального окна, хотя это не проблема, я хотел бы решение, которое, если кто-то добавляет в закладки или делится ссылкой с хэштегом, поле автоматически раскрывает себя.

Например, если я нажму Bits and Bobs, URL-адрес будет sitename.com/#bits-n-bobs, и он покажет модальное окно. Что я хочу, так это то, что когда кто-то связывает домен с хэштегом при посещении этой страницы с хэштегом, он открывает модальное окно с использованием JavaScript без необходимости нажимать.

Я предполагаю, что это довольно легко сделать с помощью JavaScript, но это одна из моих самых слабых сторон, и я ценю любую помощь или, по крайней мере, указание меня в правильном направлении.


javascript modal-dialog zurb-foundation-5
person Simon Hayter    schedule 09.03.2014    source источник
comment
Посмотрите на наведение курсора в JavaScript: stackoverflow.com/questions/ 608788/   -  person TylerH    schedule 09.03.2014
comment
Спасибо, но эта страница не имеет ничего общего с хэштегами и модальными полями. Речь идет о ховерах. Я хочу модальное окно, которое запускается через JavaScript и доступ к URL-адресу хэштега.   -  person Simon Hayter    schedule 09.03.2014

Ответы (1)


arrow_upward
1
arrow_downward

При загрузке вы можете получить id из URL-адреса с помощью window.location.hash, а затем вызвать модальное окно с помощью этого $('#myModal').foundation('reveal', 'open'); [ источник].

Также проверьте, существует ли элемент с этим id и имеет ли он класс reveal-modal перед его открытием.

$(document).ready(function(){
   var target = $(window.location.hash);
   if(target.length > 0 && target.hasClass('reveal-modal'))  {
     target.foundation('reveal', 'open');
   }
});
person anpsmn    schedule 13.03.2015