<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Demo</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="layer.js" ></script>
<style>
#fudong{
color:white;
cursor:pointer;
}
.right{position: absolute;
right: 0;top:0;
width: 100px;text-align: center;line-height:100px; }
.wtest{
border-radius:0;
background-image:url("bg.jpg");
/*color:white;*/
}
.wtest .layui-m-layercont{
color:white;
}
.wtest .layui-m-layerbtn{
background-color:transparent;
}
.wtest .layui-m-layerbtn span:active{
background-color:transparent ;
}
</style>
</head>
<body style="height:1000px;">
<div id="fudong" style="border:1px solid #454545; width:100px; height:100px; position: absolute; left: 0px; top: 100px;background: dodgerblue;">
<span id="btn" style="display:none;height:100px;width:200px;background: orange;line-height:100px; ">点击弹出智能导购确认</span>
<span style="display: inline-block;word-wrap: break-word;word-break: break-all;overflow: hidden;" class="right">出来</span>
</div>
<script>
$(function() {
var timer, scrollTop, sideDiv = $('#fudong').appendTo('body');
$(window).scroll(function() {
timer && clearTimeout(timer);
scrollTop = $(this).scrollTop();
timer = setTimeout(function() {
sideDiv.animate({
top: scrollTop + 100 + 'px'
}, 100);
}, 100);
});
$(".right").click(function(){
if($("#btn").css("display")=="none"){
$("#fudong").css("width","300px");
$("#btn").css("display","block");
$(".right").html("退下");
}else{
$("#btn").css("display","none");
$("#fudong").css("width","100px");
$(".right").html("出来");
}
});
$("#btn").click(function(){
//background-color:transparent;
//询问框
layer.open({
content: '您确定要进入智能导购模式吗？'
,className:'wtest'
//,style:'border-radius:0px;background-image:url("bg.jpg");'
,btn: ['要', '不要']
,yes: function(index){
location.reload();
layer.close(index);
}
});
})
});
</script>
</body>
</html>
