-
Notifications
You must be signed in to change notification settings - Fork 6.4k
Open
Description
<title>长按显示菜单</title>
<style>
html {
height: 100%;
margin: 0;
}
body {
background-image: url("333.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
max-height: 100vh;
background-color: #f4f4f4;
}
#longPressImage {
width: 100%;
height: 100vh;
object-fit: cover;
}
.aw {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: var(--weui-BG-1);
border-top-left-radius: 12px;
border-top-right-radius: 12px;
overflow: hidden;
outline: 0;
display: none;
animation: slideUp 0.3s ease-out forwards;
}
.actionsheet__mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
z-index: 10;
}
.first-button-gray {
border-bottom: 1px solid #F2F2F3;
}
@keyframes slideUp {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
</style>
<div id="actionSheet_wrap" class="aw">
<div id="weui-actionsheet">
<div class="weui-actionsheet__title first-button-gray">是否扫码</div>
<div class="weui-btn" id="scanYes" onclick="confirmAction()">是</div>
<div class="weui-actionsheet__action">
<div class="weui-actionsheet__cell" id="actionsheet_cancel">取消</div>
</div>
<div class="weui-actionsheet__menu">
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
let pressTimer;
const longPressImage = document.querySelector('#longPressImage img');
longPressImage.addEventListener('touchstart', function (event) {
event.preventDefault(); // 阻止默认行为
pressTimer = setTimeout(function () {
document.getElementById('actionSheet_wrap').style.display = 'block';
document.getElementById('mask').style.display = 'block';
}, 300);
});
longPressImage.addEventListener('contextmenu', function (event) {
event.preventDefault(); // 阻止默认的上下文菜单
});
document.getElementById('scanYes').addEventListener('touchend', function () {
console.log('Scan Yes clicked');
confirmAction();
});
document.getElementById('actionsheet_cancel').addEventListener('touchend', function () {
closeActionSheet();
});
document.getElementById('actionsheet_cancel').addEventListener('click', function () {
closeActionSheet();
});
document.getElementById('mask').addEventListener('click', function () {
closeActionSheet();
});
function closeActionSheet() {
document.getElementById('actionSheet_wrap').style.display = 'none';
document.getElementById('mask').style.display = 'none';
}
function confirmAction() {
console.log("1111");
window.open('https://www.baidu.com', '_self');
console.log("2222");
setTimeout(closeActionSheet, 10000);
}
});
</script>
Metadata
Metadata
Assignees
Labels
No labels
