<div style="width:200px; height:150px; border:1px solid red;bottom:-150px:position:fixed;right:10px;">
<button id="dd">按钮</button><button onclick="down()">关闭</button>
</div>
<script>
$('#dd').click(function(){
timer=setInterval(moveUp,100);
});
var div=document.querySelector("#dd");
var timer=null;
function moveUp(){
var aa=
document.defaultView.getComputedStyle(div,null);
var bottom=parseInt(aa.bottom);
if(bottom!=0){
bottom=bottom+10;
div.style.bottom=bottom+"px";}else{
clearInterval(timer);
timer=null;
}
function moveDown(){
var aa=
document.defaultView.getComputedStyle(div,null);
var bottom=parseInt(aa.bottom);
if(bottom!=-($('#alertM').height())){
bottom=bottom-10;
div.style.bottom=bottom+"px";}else{
clearInterval(timer);
timer=null;
}
}
function down(){ //onclick 事件函数
if(timer==null){
timer=setInterval(moveDown,100);
}
}
}</script>
为什么我弹出框每次要刷新后点击才能出来,关闭后连续点击不会弹出来,需要刷新页面在点击
建议上完整一点的代码,这样也能更快的解决问题
你点击 关闭 按钮 不是隐藏了你的div了吗?
div在页面上看不到了,你还要怎样~~~
if(bottom!=-($('#alertM').height())){
此处有误获取的数据是带有px字符的,例如150px,所以要通过parseInt转成int
===下面是修改过后代样例代码===
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../script/jquery-2.1.3.min.js"></script>
<script>
$(function(){
$('#dd').click(function(){
timer=setInterval(moveUp,100);
});
$('#closeDiv').click(function(){
down();
});
var div=document.querySelector("#popupDiv");
var timer=null;
function moveUp() {
var aa = document.defaultView.getComputedStyle(div, null);
var bottom = parseInt(aa.bottom);
if (bottom != 0) {
bottom = bottom + 10;
div.style.bottom = bottom + "px";
} else {
clearInterval(timer);
timer = null;
}
}
function moveDown(){
var aa=document.defaultView.getComputedStyle(div,null);
var bottom=parseInt(aa.bottom);
//aa.height 获取的数据是带有px字符的,例如150px,所以要通过parseInt转成int
if(bottom!=-(parseInt(aa.height))){
bottom=bottom-10;
div.style.bottom=bottom+"px";
}else{
clearInterval(timer);
timer=null;
}
}
function down(){ //onclick 事件函数
if(timer==null){
timer=setInterval(moveDown,100);
}
}
});
</script>
</head>
<body>
<button id="dd">show Div</button>
<div id="popupDiv" style="width:200px; height:150px; border:1px solid red;bottom:-150px;position:fixed;right:10px;">
<button>按钮</button><button id="closeDiv" >关闭</button>
</div>
</body>
</html>
我猜是这样的:
如果你弹出框的button id是dd,
但是你在代码里写的是
$('#dd').click(function(){})
这个是触发点击事件,所以每一次你刷新页面,都相当于定义了一下点击button后的操作。
所以你应该是监听这个click事件
$('#dd').on('click',function(){ 。。。。})