#javascript #modal-dialog #browser-history
#javascript #modal-dialog #браузер-история
Вопрос:
Я использую
http://domain.com/page1.htm#modal
чтобы открыть модальный диалог с помощью css и псевдоселектора :target.
Проблема возникает, когда я закрываю это с помощью <a href>close</a> . Это правильно закрывает модальное окно, но также добавляет новую запись истории. Итак, история теперь выглядит так:
http://domain.com/page1.htm
http://domain.com/page1.htm#modal
http://domain.com/page1.htm
Есть ли какой-либо способ предотвратить создание тегом action этой новой записи истории?
Комментарии:
1. Простое решение — не использовать привязку, кнопка с onclick может быть лучше. Или, если история важна, вы можете заглянуть в API истории .. developer.mozilla.org/en-US/docs/Web/API/History_API
2. Я пытался найти способ решить эту проблему, используя только html / css, чтобы модальный диалог продолжал работать даже без javascript, но это может оказаться невыполнимой задачей. @Keith: History API делает много хороших вещей, я использую его во многих местах, но решение этой проблемы, похоже, не входит в их число.
3. Я не уверен, что вы имеете в виду, API истории pushState / replaceState / popState практически позволяет вам делать с историей все, что вы хотите. И да, выполнение этого CSS только, я думаю, невозможно, так как это поведение тега привязки.
4. Насколько я вижу, History API не позволяет удалять записи истории.
5. Вы просто выполняете history.back() или history.go(-1) и т. Д. вы контролируете popState, поэтому вы можете игнорировать его необходимость. Я добавлю пример фрагмента..
Ответ №1:
Ниже приведен пример того, как возиться с историей.. Итак, в качестве примера, когда вы закрываете диалоговое окно, вы можете просто выполнить history.go(-2); чтобы удалить последние 2 элемента истории.
$('#removeHist').click(function () {
history.back();
});
$('#pushdaft').click(function () {
history.pushState({},'daft title', '?someparam');
console.log('pushed location: ' location.href);
});
window.onpopstate = function(event) {
console.log('location now: ' location.href);
}
console.log('hello'); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#one">One</a>
<a href="#two">Two</a>
<button id="pushdaft">Add history</button>
<button id="removeHist">Remove History</button> Комментарии:
1. Спасибо за пример, Кит. Немного сложно читать из-за использования ужасной библиотеки jQuery, но я вижу, как это работает. Окончательное решение, используемое в отдельном сообщении ниже, чтобы я мог включить код.
2. jQuery не так уж и плох.. Я понимаю, как некоторые люди рассматривают его как большую библиотеку-монстра, поскольку он становится большим включением, когда требуется всего несколько функций. Я просто хочу, чтобы jQuery шел по пути Lodash, с NPM, чтобы, скажем, вы могли сделать, var ajax = require(‘jquery / ajax’);
3. Возникли проблемы с Internet Explorer, поэтому протестировал выше, но в IE произошел сбой: Ошибка: { «message»: «SecurityError», «filename»: » stacksnippets.net/js «, «линено»: 23, «кольно»: 3 }
Ответ №2:
Окончательное используемое решение, да, оно использует Javascript, но возвращается к в основном работающему senario, если Javascript недоступен:
document.querySelector(".close").onclick = function() { history.back(); return false; }; <a href title="Close" class="close"></a> Комментарии:
1. К сожалению, это не работает в Internet Explorer. History.back() удаляет хэш #modal1 из URL-адреса, но не обновляет экран, чтобы отразить это. тем не менее, он отлично работает в Firefox! Есть предложения, как заставить IE обновить экран и переосмыслить CSS без перезагрузки всей страницы?
Ответ №3:
Для всплывающего окна только CSS вы должны использовать флажок или радиовход вместо :target . Затем вы откроете всплывающее окно с псевдоклассом:проверено, который не создает запись истории.
<body>
<div class="pop-wrapp">
<input type="checkbox" id="open" name="mobile-pop">
<label for="open" class="open-pop">☰</label>
<div class="popup">
<label for="open" class="close-pop">×</label>
<div>Text inside of the pop up</div>
</div>
<label for="open" class="close-pop-overlay"></label>
</div>
</body>
<style>
*, *::before, *::after {
box-sizing: border-box;
transition: all 0.35s ease;
}
body {
font-size: 2rem;
}
label {
cursor: pointer;
}
#open {
/* hiding the checkbox */
display: none;
}
.popup {
position: absolute;
left: -100%;
top: 10vw;
background: white;
padding: 5vw;
z-index: 200;
width: 80vw;
}
#open:checked ~ .popup {
left: 10vw;
}
/* An overly, to be able to click outside of the popup and close it */
#open:checked ~ .close-pop-overlay {
position: fixed;
inset: 0;
background: #00000040;
z-index: 100;
cursor: initial;
}
</style>