官网下载layui包http://www.layui.com/
页面引入JS/CSS.
页面:
<!-- 浮动 -->
<div id="img">
<img src="${ctxStatic}/images/nls1.png" id="tie">
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#img').animate({right:'-=50px'});
layer.tips('Hi,我是tips', '#img',{tips:2});
$(document).on("mouseenter","#img",function(){
$(this).animate({right:'+=50px'},500);
})
$(document).on("mouseleave","#img",function(){
$(this).animate({right:'-=50px'},500);
})
});
$('#tie').click(function(){
layer.open({
type: 2,
title: '很多时候,我们想最大化看,比如像这个页面。',
shadeClose: true,
shade: false,
scrolling:false,
maxmin: true, //开启最大化最小化按钮
area: ['893px', '600px'],
content: 'jsp/PostsIndex.jsp'
});
})
</script>
效果:
直接引入一个页面到content就好了。
然后就发现了问题,在这个iframe弹出框里不能刷新,直接刷新了父页面。 就加了个按钮。
iframe页面:
<div id="xf">
<i class="layui-icon" id="sx" onclick="javascript:location.reload();" style="font-size:30px;">ဂ</i>
<div id="top">
<i class="layui-icon" style="font-size:45px;"></i>
</div>
</div>
css样式:
#sx{
float:right;
width:50px;
right:20px;
position: fixed;
text-align: center;
height: 45px;
line-height: 44px;
bottom:56px;
margin-bottom: 1px;
cursor: pointer;
font-size: 26px;
background-color: #009E94;
color: #fff;
border-radius: 2px;
}
#top{
float:right;
width:50px;
right:20px;
position: fixed;
text-align: center;
height: 45px;
line-height: 44px;
bottom:10px;
margin-bottom: 1px;
cursor: pointer;
font-size: 26px;
background-color: #009E94;
color: #fff;
border-radius: 2px;
}
效果:
只要向下滚动就会出现返回顶部按钮,滚动到顶部按钮自动隐藏。
最后是jQuery:
<script type="text/javascript">
$(document).ready(function(){
$("#top").css("display","none");
})
$(window).scroll(function(){
var sc=$(window).scrollTop();
var rwidth=$(window).width()
if(sc>0){
$("#top").css("display","block");
$("#top").css("left",(rwidth-70)+"px")
}else{
$("#top").css("display","none");
}
})
$("#top").click(function(){
$('body').animate({scrollTop:0},500);
})
</script>