layer弹窗 content 里的内容在页面隐藏的原因

提问 已结
19 212
随海逸
随海逸 2018-6-12
悬赏:20飞吻
版本:layui 2.3.0 浏览器:谷歌65
我用layer弹窗,content里面的内容是用获取顶级iframe页面内容注入进去的,这部分内容在页面中是display:none,点击弹出框内容正常,但是关闭弹窗之后,原本页面中的内容显示出来了,我看到页面中那元素加了一个行内样式: display:block;

我也知道可以在end函数里面手动隐藏掉,但是我就想知道这样形成的原因(图片是网上相关话题找的,因为公司项目涉密,望谅解)

操作前:


操作:


操作后:
回帖
  • 恩恩,以前遇到过,应该是content设置成$('#id')这种形式,也没找到什么特别好的方法,然后就都是使用content:$('id').html()的形式,<script type="text/html" id="XXXX">...</script>
    0 回复
  • @FLY_WEI 上面那种写法是可以的,不过我这边其实也很少用那种写法,设置content:''然后在seccess里面再通过ajax load把要显示的页面给添加进来,比如
    layer.open({
    contetn: '',
    success: function(layero, index) {
    layero.find('.layui-layer-content').load('detail.html');
    }
    });

    // detail.html的内容实例,注意这个html里面不要写<html><head><body>之类的直接写实际的内容就可以了
    <div>
    <span>Hello world!</span>
    </div>
    <script>
    alert('hello');
    </script>
    我这边一般是这么去处理,这样就不会在一个html里面放了很多的一开始就用不到的隐藏节点。
    1 回复
  • 随海逸
    2018-6-12
    @岁月小偷 好的,谢谢你了,我也是想找找问题的来源,多多学习进步
    0 回复
  • @随海逸 不客气,我也是你开始接触的时候用那种方式试了下调了调,发现其实那个不实用就没再折腾了
    0 回复
  • FLY_WEI
    2018-6-13
    @岁月小偷 弹框是指能这样写的吗?
    0 回复
  • FLY_WEI
    2018-6-13
    @岁月小偷 之前一般都是content:$("#add") 然后页面就是<div id="add"></div> 但我最近写的时候,发现了个问题,就是变形了。怎么说呢,就是一弹框出来就被遮罩了,而且谈出的框位置在右下角
    0 回复
  • FLY_WEI
    2018-6-13
    @岁月小偷 你意思是,每个弹框的内容都写在另外一个html页面中(单写<div>这些),然后加载进来?
    0 回复
  • @FLY_WEI 不仅仅是弹窗可以用
    0 回复
  • FLY_WEI
    2018-6-13
    @岁月小偷 这样的话,弹一个框就一个页面。将会有很多页面呀
    0 回复
  • @FLY_WEI 也可以把弹窗的页面都放在一个页面的,这样子一个html里面内容很多而已,而且ajax load也可以加载页面的某个区域比如$("#result").load("ajax/test.html #container");加载页面页面中的某个div等等,原理用的就是ajax load,详细看api剩下的就是取舍了,是将很多很多的节点放在一个html中减少html数量还是将功能比较独立的放在一个个html中。
    0 回复
  • FLY_WEI
    2018-6-13
    @岁月小偷 那一般开发都是怎样的放的呢?一个弹框写一个页面还是弹框都写在一个页面上呢?


    是这样写吗?


    这样弹框为什么出现下拉框和单选框没效果了呢?
    0 回复
  • @FLY_WEI 这一块你审查一下元素就知道了,layer的弹出框其实里面分了几个部分,layui-layer-content其实就是你content放置的容器,效果没出来是因为你render的地方放错了,因为load其实也是一个ajax get set一样的,所以建议你先把render放到success里面load之后试一下。或者写成layer.find().load(url, function(){form.render()})。当然这块部分的代码其实应该是属于被load的范畴了,所以有一些业务逻辑也可以放在被load的页面中去做。
    0 回复
  • FLY_WEI
    2018-6-13
    @岁月小偷 嗯嗯,我放到.load(url, function(){form.render()})就可以了。不知道这样算不算规范。。

    layer.find(“layui-layer-conten”) 是固定的写法吧。


    像这样的话,我这个是写弹框内容的html。应该怎么layui.find()才算规范呢?
    0 回复
  • @FLY_WEI 是layero.find(),layero是success回调的时候控件提供给我们的两个参数之一,layero就是当前这个layer组件的节点,里面找layui-layer-content就只有一个。
    0 回复
  • FLY_WEI
    2018-6-13
    @岁月小偷 明白!谢谢你呢
    0 回复
  • @FLY_WEI 不客气[微笑]
    0 回复
  • FLY_WEI
    2018-6-13
    @岁月小偷 你可以再帮我看个问题吗?[嘻嘻]

    前端使用ajax请求去后端拿去数据:


    后端接收请求:


    一开始,一直报服务器响应错误,然后现在又报: Request method 'POST' not supported


    我找了很久也找不出原因,你可以帮我看一下吗
    0 回复
  • FLY_WEI
    2018-6-13
    @FLY_WEI 我截图给你的url是错的,并没有报Request method 'POST' not supported错误,
    就是一直报服务器响应,又没有报错。真心不知道哪里错了
    0 回复
  • @FLY_WEI 这个有点奇怪,有可能是你这么写url他认为是跨域的吧,url应该可以写成/emp这样就可以了,然后看有没有报错,是要根据当前路径去找的,如果错了就看路径哪里出问题了是不是要加../emp之类的。再有问题发个帖子出来哈,在人家帖子里面来回聊会打扰帖主的哈[偷笑]
    0 回复