0

我正在编写一个小型 Web 应用程序，我决定不使用任何框架。我只会写香草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 有什么问题？我知道它仍然没有组织，但我想在开始之前让事情顺利进行。

4

1 回答 1

3

即使您不使用库，我也建议您使用与 jQuery 相同的策略。具体来说，我会在一个隐藏的静态 HTML 中指定所有三个对话框div。例如，以下将是“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 元素相比，这将使您的工作更易于维护。您可以通过添加一个名为dialogCSS 的类来指定对话框的样式。

您的代码的具体问题

您的代码的具体问题是您将同一个变量重新分配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();

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

于 2012-09-10T13:25:04.833 回答