Модальное окно js
Привет всем.
Такой вопрос, как сделать чтобы при нажатии на блок и удержании нажатия в течении 3-4х секунд, появлялось мод. окно? |
zubrrap,
какие проблемы? mousedown => clearTimeout + setTimeout; mouseup => clearTimeout |
Если не сложно можете написать скрипт в пример?
<div class="block">Нажать </div> <div class="cont"> Содержание </div> |
zubrrap,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.cont{ opacity: 0;
font-size: 34px;
left: 0;
padding: 10px;
margin: 0 auto;
position: absolute;
right: 0;
text-align: center;
width: 300px;
z-index: 99999;
background-color: #FF00FF;
visibility: hidden;
transition: all .8s
}
.cont.show { visibility: visible; opacity: 1; }
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var block = document.querySelector('.block'),
cont = document.querySelector('.cont'), timer;
block.addEventListener('mousedown', function() {
window.clearTimeout(timer);
timer = window.setTimeout(function() {
cont.classList.add("show")
},3000)
});
block.addEventListener('mouseup', function() {
window.clearTimeout(timer);
});
});
</script>
</head>
<body>
<div class="block">Нажать
</div>
<div class="cont">
Содержание
</div>
</body>
</html>
|
Спасибо большое
|
| Часовой пояс GMT +3, время: 18:15. |