網(wǎng)站建設(shè)開發(fā)移動(dòng)端彈窗彈出后手機(jī)物理返回關(guān)閉彈窗不跳轉(zhuǎn)頁面
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();
})
//拉起彈窗后手機(jī)物理返回操作關(guān)閉彈窗,彈窗出現(xiàn)時(shí)執(zhí)行'pushHistory'函數(shù),獲取地址
function pushHistory() {
var state = {
title: "title",
url: "#"
};
window.history.pushState(state, "title");
}
// 監(jiān)聽手機(jī)物理返回
window.addEventListener("popstate", function (e) {
// 判斷彈窗是否顯示
if ($(".popup").css('display') == "block") {
$(".popup").fadeOut();
} else {
history.back()
}
}, false);
</script>
彈窗時(shí)執(zhí)行函數(shù)pushHistory();即可做到移動(dòng)端彈窗彈出是物理返回關(guān)閉彈窗不跳轉(zhuǎn)頁面
本文鏈接:http://jmtianhui.com/news/details-12-240.html
版權(quán)聲明:
1:本站所有內(nèi)容均由互聯(lián)網(wǎng)收集整理、上傳,并且以計(jì)算機(jī)技術(shù)研究交流為目的,僅供大家參考、學(xué)習(xí),不存在任何商業(yè)目的與商業(yè)用途,如描述有誤或者學(xué)術(shù)不對之處歡迎及時(shí)提出,不甚感謝。
2、 如涉及版權(quán)問題,請聯(lián)系我們4724325@qq.com第一時(shí)間處理;
我們從以下三個(gè)方面,對比純靜態(tài)和偽靜態(tài)兩種靜態(tài)頁面生成方式,逐一展開分析。
用JS的正則表達(dá)式如何判斷輸入框內(nèi)為中文或者是英文數(shù)字,或者是三者混編
css制作扇形
純CSS3文字Loading動(dòng)畫特效
PhpStorm 2022.1 EAP 3 在 PHPDoc 和屬性中添加了對多行和嵌套數(shù)組形狀的完全支持:在這種情況下,可以使用數(shù)組形狀注釋定義數(shù)組結(jié)構(gòu),以獲得鍵的代碼補(bǔ)全并推斷值的類型。
PHP作為Web界第一大語言近年來熱度不夠,但是這幾年的進(jìn)步和成長卻沒有中斷。在2022伊始,我們來一起學(xué)習(xí)一下目前PHP的現(xiàn)狀以及最新版本帶來的特性。
Linux程序前臺后臺切換:在Linux終端運(yùn)行命令的時(shí)候,在命令末尾加上 & 符號,就可以讓程序在后臺運(yùn)行Ubuntu$">root@Ubuntu$ ./tcpserv01 &
Python 的正則表達(dá)式支持 多行模式,將每行文字分別匹配。然而各種操作系統(tǒng)里,換行符的表示法各不相同,會(huì)導(dǎo)致 Python 不能正確使用多行模式。