layer 至今仍作為 layui 的代表作,她的受眾廣泛並非偶然,而是這數年來的堅持、不棄的執念,將那些不屑的眼光轉化為應得的尊重,不斷完善和維護、不斷建設和提公升社群服務,在 web 開發者的圈子裡口口相傳,乃至於成為今天的 layui 最強勁的源動力。目前,上述介紹引自layui官網介紹layer已成為國內最多人使用的 web 彈層元件,
github 自然stars
今天需要用到layer彈出乙個iframe窗,直接從layer官網
上copy過來這麼一段
//iframe窗
layer.open();
}});
發現在這一段**設定之後,彈出的iframe中有一些問題:
1、可以自由拖拽在頁面內移動;
2、我在iframe中展示頁面的文字顏色出現問題;
3、還有iframe頁面的大小不理想;
4、iframe視窗預設情況會允許縮放延伸。
好吧,我也沒指望引入的例子剛好滿足我,那麼久找方法去修改唄,網上搜尋到的感覺還是有點亂,感覺沒有專門講這個的,不會很細,所以我的問題網上搜尋,沒解決,這也是我寫下這篇部落格的原因。
要知道無論你用什麼外掛程式或者框架,最好的解決方法就是看文件!!!
是因為我之前看的舊的layer文件,真的是,大家引以為戒,看最新的文件最好是。
來解決問題開始:
1、move
- 觸發拖動的元素
型別:string/dom/boolean,預設:'.layui-layer-title'
預設是觸發標題區域拖拽。如果你想單獨定義,指向元素的選擇器或者dom即可。如
move: '.mine-move'
。你還配置設定
move: false
來禁止拖拽;
2、字型顏色的話我直接
加了個class
,覆蓋上去;
3、area - 寬高
型別:string/array,預設:'auto'
在預設狀態下,layer是寬高都自適應的,但當你只想定義寬度時,你可以
area: '500px'
,高度仍然是自適應的。當你寬高都要定義時,你可以
area: ['500px', '300px']。4、
resize
- 是否允許拉伸
型別:boolean,預設:true
預設情況下,你可以在彈層右下角拖動來拉伸尺寸。如果對指定的彈層遮蔽該功能,設定
resize:false
即可。該引數對loading、tips層無效
大家有其他的問題的話可以多看看文件
layer文件
《layui宇宙版教程》 Layui介紹
1.1 layui介紹 layui是經典的模組化前端框架,由職業前端資深工程師傾情打造,面向全層次的前後端開發者和低門檻開箱即用的前端ui解決方案。layui是採用模組化規範編寫的前端ui框架,遵循原生html css js的書寫與組織形式,學習門檻極低,拿來即用。其外在極簡,卻又不失飽滿的內在,體...
Layui的表單理解
form中開關效果 其實就是checkbox核取方塊的 變種 通過設定 lay skin switch 形成了開關風格。屬性 屬性checked可設定預設開 屬性disabled開啟禁用 屬性lay text可自定義開關兩種狀態的文字 設定value 1 可自定義值,否則選中時返回的就是預設的on ...
layui 日期重置 layui怎麼使用日期控制項
目前layui中的日期元件還是laydate 1.1的改良版,它後續將會進行一次重寫。順便列舉幾個常用例子 範圍選擇 layui.use laydate function var laydate layui.laydate var start min laydate.now max 2099 06 ...