layui弹出iframe

官网下载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;">&#x1002;</i>

    <div id="top">
        <i class="layui-icon" style="font-size:45px;">&#xe604;</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>

就这样了。