我有一个自定义的弹窗功能。我希望浏览器的返回按钮可以关闭此弹窗。
我的理想情况是在URL栏中不显示井号。
我尝试在我的showPopup()函数中放置window.history.pushState('forward', null, ''),然后执行以下操作:
我的理想情况是在URL栏中不显示井号。
我尝试在我的showPopup()函数中放置window.history.pushState('forward', null, ''),然后执行以下操作:
$(window).on('popstate', function () {
closePopup();
});
这种方法确实可行,但问题在于当我手动关闭弹出窗口时,我必须按两次后退按钮才能导航回上一页(显然是因为打开弹出窗口时添加了浏览器历史记录条目)。
有什么更好的方法吗?能否在不添加浏览器历史记录条目的情况下完成?本质上,我试图复制移动应用程序的行为。在移动应用程序中按返回按钮通常会关闭所有打开的模态或上下文菜单。
$('.popup-link').click(function() {
showPopup();
});
$('.popup-close').click(function() {
hidePopup();
});
function showPopup() {
$('.popup').addClass('active');
}
function hidePopup() {
$('.popup').removeClass('active');
}
.popup {
background-color: #ccc;
width: 300px;
height: 300px;
display: none;
}
.popup.active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="popup-link">Click</button>
<div class="popup">
<button class="popup-close">x</button>
<!-- popup content here -->
</div>
popup-close
的close
按钮来关闭弹出窗口吗? - pouyan