給div設置一個關閉按鈕.

造輪子好難.

用慣了框架提供的組件,某天自己要做個偽組件(或者在他人創建的頁面效果上添加新功能)會發現很難. 所以,碰到了,就一定要做下記錄.以供日后查閱.

如圖,彈出DIV右上角的關閉按鈕是我此次添加的.  觀眾老爺可能會納悶,原來設計中沒有關閉按鈕,設計不合理啊. 確實原設計沒有.我才得有此經歷.

頁面是使用的easyui. 彈出的窗口沒用window是客戶不喜歡那樣的效果. 彈出的div是開發人員自己手寫的一個div.

添加的按鈕,代碼如下:

<div id="aa" style="z-index: 9001;">
	<a id="bb" href="javascript:void(0)" class="panel-tool-close bb-icon-close"></a>
	<table>
	...
	</table>
</div>

css

.bb-icon-close {
	position: absolute;
	display: inline-block;
	margin: 4px 0 0 280px;
	width: 16px;
	height: 16px;
	line-height: 15px;
	cursor: pointer;
	text-decoration: underline;
	vertical-align: top;
	text-align: left;
}

.panel-tool-close 是esayui的樣式. 就是那個關閉按鈕的圖片.

.bb-icon-close 是仿照easyui例子,一點點調試出來的. 除了"margin: 4px 0 0 280px;"是個瑕疵,值得再推敲外.其他可以直接復用.

頭三句最重要, position: absolute;     display: inline-block;     margin: 4px 0 0 280px;

關於absolute ,慕課網上有個視頻,講解得挺透徹的. 可以前去學習.