网站建设开发移动端弹窗弹出后手机物理返回关闭弹窗不跳转页面
css:
<style>
.popup {
display: none;
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background-color: #000000;
}
.btn {
margin: 100px auto;
width: 100px;
height: 40px;
line-height: 38px;
border-radius: 25px;
text-align: center;
border: 1px solid green;
cursor: pointer;
}
</style>
html:
<body>
<div class="popup">
</div>
<div class="btn">弹窗</div>
</body>
js:
<!-- 引入JQ -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
// 拉起弹窗
$(".btn").click(function () {
$(".popup").fadeIn();
pushHistory();
})
//拉起弹窗后手机物理返回操作关闭弹窗，弹窗出现时执行'pushHistory'函数,获取地址
function pushHistory() {
var state = {
title: "title",
url: "#"
};
window.history.pushState(state, "title");
}
// 监听手机物理返回
window.addEventListener("popstate", function (e) {
// 判断弹窗是否显示
if ($(".popup").css('display') == "block") {
$(".popup").fadeOut();
} else {
history.back()
}
}, false);
</script>
弹窗时执行函数pushHistory();即可做到移动端弹窗弹出是物理返回关闭弹窗不跳转页面
本文链接：https://www.looit.cn/news/details-12-240.html
版权声明：
1：本站所有内容均由互联网收集整理、上传，并且以计算机技术研究交流为目的，仅供大家参考、学习，不存在任何商业目的与商业用途，如描述有误或者学术不对之处欢迎及时提出，不甚感谢。
2、 如涉及版权问题，请联系我们4724325@qq.com第一时间处理；
我们从以下三个方面，对比纯静态和伪静态两种静态页面生成方式，逐一展开分析。
用JS的正则表达式如何判断输入框内为中文或者是英文数字，或者是三者混编
css制作扇形
纯CSS3文字Loading动画特效
PhpStorm 2022.1 EAP 3 在 PHPDoc 和属性中添加了对多行和嵌套数组形状的完全支持：在这种情况下，可以使用数组形状注释定义数组结构，以获得键的代码补全并推断值的类型。
PHP作为Web界第一大语言近年来热度不够，但是这几年的进步和成长却没有中断。在2022伊始，我们来一起学习一下目前PHP的现状以及最新版本带来的特性。
Linux程序前台后台切换：在Linux终端运行命令的时候，在命令末尾加上 & 符号，就可以让程序在后台运行Ubuntu$">root@Ubuntu$ ./tcpserv01 &
Python 的正则表达式支持 多行模式，将每行文字分别匹配。然而各种操作系统里，换行符的表示法各不相同，会导致 Python 不能正确使用多行模式。