layui的layer iframe禁止縮放拖拽

2021-08-21 05:26:32 字數 1324 閱讀 2772

layer 至今仍作為 layui 的代表作,她的受眾廣泛並非偶然,而是這數年來的堅持、不棄的執念,將那些不屑的眼光轉化為應得的尊重,不斷完善和維護、不斷建設和提公升社群服務,在 web 開發者的圈子裡口口相傳,乃至於成為今天的 layui 最強勁的源動力。目前,

layer已成為國內最多人使用的 web 彈層元件,

github 自然stars

上述介紹引自layui官網介紹

今天需要用到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 ...