模態對話方塊和全選反選

2022-07-04 00:18:12 字數 1414 閱讀 2347

效果:

2.1 製作**和新增按鈕

選擇

主機名埠

2.2 實現遮罩層和彈出框

# body 中html

主機名:

埠號:# css樣式

效果:

2.3 實現js,點選新增出現遮罩層和彈出框,點選取消則沒有

利用display:none可以是標籤消失的特性,為遮罩層和彈出框都在增加乙個hidden的css樣式。修改原理的html** 

# 增加乙個css樣式

.hidden

# 修改遮罩層和彈出框

# 為新增和取消按鈕增加乙個onclick事件

# 新增js**

實現效果:點選新增按鈕則出現遮罩層和彈出框,點選取消則恢復原樣

2.4 實現全選、取消和反選的功能

(1)增加3個按鈕功能

(2)為增加乙個id屬性 

(3)編輯js 

// 全選

function chooseall() {

// tag獲取標籤var tag = document.getelementbyid('tb');

// 通過children獲取所有子標籤組成的陣列

var t_list = tag.children;

/*迴圈t_list,先獲取tr即每行

再獲取每行中的第乙個元素,即第乙個td

再獲取第乙個td中的第乙個屬性checkbox

*/for(var i=0;i完整**:

選擇主機名埠

1.1.1.1

191

1.1.1.2

192

1.1.1.3

193

主機名:

埠號:

模態對話方塊和非模態對話方塊

模態對話方塊和非模態對話方塊的區別 在這裡我就說的比較通俗易懂了,就是當你開啟乙個模態對話方塊時,你的焦點不能轉移到程式的其他視窗上,也就是你只能先響應模態對話方塊,才能進行成下面的操作。而非模態對話方塊則相反,你可以不用管它,照常能夠將其他視窗啟用。建立模態對話方塊,主要是應用對話方塊的domod...

模態對話方塊和非模態對話方塊

模態對話方塊 關閉才能返回,非模態 不關閉就能返回 在資源裡新建立二個對話方塊 為新的對話方塊建立乙個類 在最原始的對話方塊函式的標頭檔案將上述兩個新新增的標頭檔案加進去,對模態按鈕進行程式設計 void cdemo11dlg onbnclickedbutton1 對非模態按鈕進行程式設計 void...

模態對話方塊和非模態對話方塊

模態對話方塊 modal dialogue box 是指在使用者想要對對話方塊以外的應用程式進行操作時,必須首先對該對話方塊進行響應。如單擊 確定 或者 取消 按鈕等將該對話方塊關閉,它和非模態對話方塊都是永遠置頂的,它們的區別在於當對話方塊開啟時,是否允許使用者進行其他物件的操作。開啟模態對話方塊...