模態框無法正常工作

Question

我正在編寫一個小型Webapp，所以我決定不使用任何框架。 我將只寫香草javascript。

我的問題是我希望能夠使用不同的鍵盤鍵打開三種不同類型的模式窗口。 例如， 克將打開一個類型，d將打開另一個，和m又一。

我嘗試實現g一個，其中將包含一個標題和一個輸入形式，以及d一個，其中包含一個標題和兩個按鈕。 到目前為止，這是我的代碼：

var width = 720;
var height = 350;
var modal = document.createElement('div');
modal.className  = "modal";
modal.style.width = width;
modal.style.height = height;
modal.style.position = 'absolute';
modal.style.top = (window.innerHeight - parseInt(modal.style.height)) / 2 +'px';
modal.style.left = (window.innerWidth - parseInt(modal.style.width)) / 2 +'px';

var ngroup = modal;
var title = document.createElement('span');
title.innerHTML = "TYPE GROUP NAME"
var input = document.createElement('input');
input.type = "text";
ngroup.appendChild(title);
ngroup.appendChild(input);

var del = modal;
var dtitle = document.createElement('span');
dtitle.innerHTML = "DO YO WANT TO DELETE SELECTED COLOR(S)"
var dinput = document.createElement('input');
dinput.type = "button";
dinput.value = "yes";
var dinput1 = document.createElement('input');
dinput1.type = "button";
dinput1.value = "no";
del.appendChild(dtitle);
del.appendChild(dinput);
del.appendChild(dinput1);   
function openModal(type) {
  var body = document.getElementsByTagName('body')[0];
  body.appendChild(type);
}
function closeModal() {
  document.body.removeChild(modal);
}

這是modal.js ，它包含在主頁中，並由此調用：

document.addEventListener('keydown', function(event) {
    if(event.keyCode == 71) {
        openModal(del);
    }
    else if(event.keyCode == 39) {
        closeModal();
    }
});

當我點擊g時 ，它將打開一個包含每個元素的模態：兩個標題，一個文本字段和兩個按鈕。 為什么？ 我的Javascript有什么問題？ 我知道它仍然沒有組織，但是我想先解決問題。

Answer 1

即使您沒有使用庫，我還是建議您使用與jQuery相同的策略。 具體來說，我將在隱藏div中的靜態HTML中指定所有三個對話框。 例如，以下為“ d”對話框：

<div id="d_dialog" style="display:none" class="dialog">
    <span>DO YO WANT TO DELETE SELECTED COLOR(S)</span>
    <input type="button" value="yes"/>
    <input type="button" value="no"/>
</div>

然后，從JavaScript中打開對話框時，只需顯示隱藏的div 。

document.getElementById('d_dialog').style.display = '';

與使用JavaScript創建所有HTML元素相比，這將使您的工作更具可維護性。 您可以通過在CSS中添加一個名為dialog的類來指定dialog的樣式。

您的代碼的特定問題

代碼的特定問題是將相同的變量modal重新分配給多個其他變量。

var del = modal;

這不會復制模態元素。 它只是使新變量del引用與模態變量相同的對象。 因此，當您致電：

del.appendChild(dtitle);

它的行為與您致電時的行為相同

modal.appendChild(dtitle);

因此，所有控件都添加到modal元素中。 當您顯示對話框時

opendDialog(del);

它的行為就像您已經打電話

openDialog(modal);

並顯示帶有所有控件的元素。 為了使代碼正常工作，您應該創建一個函數createModal ，該函數僅執行以下操作：

function createModal()
{
    var width = 720;
    var height = 350;
    var modal = document.createElement('div');
    modal.className  = "modal";
    modal.style.width = width;
    modal.style.height = height;
    modal.style.position = 'absolute';
    modal.style.top = (window.innerHeight - parseInt(modal.style.height)) / 2 +'px';
    modal.style.left = (window.innerWidth - parseInt(modal.style.width)) / 2 +'px';
    return modal;
}

然后，對於每個對話框，

var del = modal;

做

var del = createModal();

這將創建一個新元素，而不是創建一個引用相同元素的新變量。