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>

就这样了。