layerd层不能实现

layerd层不能实现,第1张

layerd层不能实现,是 *** 作过程中出现错误造成的,解决方法如下:

1、首先要先引用layer.js。

2、添加对应触发d出框的按钮,写javascript代码进行处理,在layer.open的配置项中加上 maxmin:true。

3、这样d出框会出现最大化和最小化按钮,用一个layerIndex变量保存打开的d出框索引,用于最小化和还原时动态隐藏遮罩层。

4、最后添加min、restore方法用于控制遮罩层的打开与隐藏,open的时候要加上title配置项,且值不能为空,要不然最小化的时候会看不到d出框最小化的内容

5、显示最小化时隐藏遮罩层如下图。

用jq就行

$('#AA').on('click',function(){

layer.open({

type: 1,

content: '内容文字XXX'

})

})

我昨天用这个插件的时候也有这个问题,d出内容大了就居不了中。这是组件不完美的地方,他设置了top和left值,而且是固定的。这种d出层都是绝对定位的 所以没办法用margin:auto 0神马的居中。解决方案主要两种:

1.修改在浏览器里面调试模式,调一下top和left看怎么合适,修改lay.css代码;

2.自己写个d出层,其实超简单,d出层原理就是搞一层遮罩(一个div,放在body下,高宽都100%,层级顺序设置高于其它层(除d出内容层以外),加个滤镜效果让他半透明)和d出内容层(层级顺序设置为最高)再加个关闭按钮。默认这三个容器隐藏(hide或display:none),点击时显示(show或display:block);

我是采用的第二种方式,实现简单自由,可以随便修改d出框的样式和丰富的内容。比如:增加记录d出表单之类。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11941600.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存