Flex實現網頁模態框

2021-08-11 09:37:05 字數 572 閱讀 6161

flex布局:

align-items: 用於彈性盒子,用來設定所有子元素在側軸上的布局

align-self: 用於彈性盒子的子元素,設定子元素在側軸的布局

線性漸變基礎:linear-gradient(colora, colorb)

主要是用來是實現模態框上面元素進行上下左右的居中顯示

**

.rule_btn

.rule_btn:hover

.modal_rule_win

.rule_detail

.rule_title

.rule_content

.close_btn

.close_btn:hover

.close_btn>p

點我彈出模態框

金樽清酒鬥十千,玉盤珍羞直萬錢

停杯投箸不能食,拔劍四顧心茫然。

欲渡黃河冰塞川,將登太行雪滿山。

閒來垂釣碧溪上,忽復乘舟夢日邊。

行路難!行路難!多岐路,今安在。

長風破浪會有時,直掛雲帆濟滄海

x

模態框功能實現

class dialog id edituserdiv style display none 編輯管理員h3 class cancelbtn xspan class clearfix div action manager edituser method post id edituserform fo...

模態框的的實現

模態框的製作 思路 兩個div進行絕對定位。背景黑色透明度opacity 設0.8 對前端顯示內容的框進行設定,加入模態框需要顯示的樣式即可。引入jquery 關於html的布局 class btn class mtqian class close alt div class motai div 關...

原生js實現模態框拖動

由於本人水平有限,不足之處請大佬指出!1.引入reset.css 2.編寫html檔案 控制內容的高度 確認修改 注意 內容的高度相對於頭部和頂部的份數 顯示模態框 x3.編寫index.css檔案 body drag drag drag header drag drag body drag dra...