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:
<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();即可做到移动端弹窗弹出是物理返回关闭弹窗不跳转页面
网站建设
品牌设计
APP开发
小程序开发
商城开发
网站优化
UI设计
增值服务
