0

私は小さな webapp を作成していますが、フレームワークを使用しないことにしました。バニラ JavaScript のみを記述します。

私が抱えている問題は、異なるキーボード キーで 3 つの異なる種類のモーダル ウィンドウを開くことができるようにしたいということです。たとえば、gあるタイプdを開き、別のタイプを開き、さらに別のタイプを開きmます。

gタイトルと入力フォームを含むdものと、タイトルと 2 つのボタンを含むものを実装しようとしました。これまでの私のコードは次のとおりです。

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押すと、すべての要素 (2 つのタイトル、1 つのテキスト フィールド、2 つのボタン) を含むモーダルが開きます。なんで？私のJavascriptの問題は何ですか? まだ整理されていないことはわかっていますが、それに入る前にうまく機能させたいと思っています。

4

1 に答える 1

3

ライブラリを使用していない場合でも、jQueryと同じ戦術を使用することをお勧めします。具体的には、静的HTMLの3つのダイアログすべてを非表示で指定します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 に答える