模式框无法正常工作

Question

我正在写一个小的webapp，我决定不使用任何框架。我会写只香草javascript。

我遇到的问题是我希望能够用不同的键盘按键打开三种不同类型的模态窗口。例如，g将打开一个类型，d将打开另一个类型，并且m又是另一个类型。

我试图实现克一个，其中将包含一个标题和输入形式，且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(); 
    } 
}); 

当我打克，它每个元素打开一个模式：两个标题，一个文本字段和两个按钮。为什么？我的Javascript有什么问题？我知道’ s仍然没有组织，但我想在做这件事之前先做事。

Answer 1

即使你不使用库，我也会推荐使用与jQuery相同的策略。具体来说，我将在隐藏的div中的静态HTML中指定所有三个对话框。当你想打开的对话框中，只显示隐藏div

<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：例如，以下将是“d”对话框。

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

这会使您的工作比创建JavaScript中的所有HTML元素更加可维护。您可以通过在CSS中添加名为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(); 

这将创建一个新元素，而不是创建一个引用相同元素的新变量。