Question

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

我遇到的问题是我希望能够使用不同的键盘键打开三种不同类型的模态窗口。例如， g 将打开一个类型， 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>

然后，当您想要打开对话框时，只需显示隐藏的div。

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();

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

模态框无法正常工作

1 个答案: