模态框无法正常工作

Modal box isn't working properly

本文关键字：工作 常工作 模态      更新时间：2023-09-26

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

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

我尝试实现 g one，它将包含一个标题和一个输入表单，以及一个带有标题和两个按钮的 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);
}

这是模态.js，它包含在主页中，由以下名称调用：

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

当我按 g 时，它会打开一个包含每个元素的模态：两个标题、一个文本字段和两个按钮。为什么？我的Javascript有什么问题？我知道它仍然没有组织起来，但我想在进入之前让事情顺利进行。

即使你不使用库，我也建议使用与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 的类来指定对话框的样式。

代码的具体问题

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

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

相关文章：