Question

我正在开发一个模式窗口，当单击一个按钮时会使用html()进行渲染，并在remove()窗口外单击时删除模态。

我试图让这段代码可以重复用于多个模态窗口。我声明了一个全局变量modalWindow，它应该定义是否单击了窗口。

这是我的代码：

var modalContent;
var modalContainer = $("#modal-container");
var modalWindow = modalWindow;
var body = $('body');

function pandaModal() {
  modalContent = "<div id='modal'><div id='window'></div></div></div>";
  modalWindow = $('#window');
  openModal();
}

function openModal() {
  modalContainer.html(function() {
    return modalContent;
  });
  var modal = $("#modal");
  body.addClass('noscroll');
  //var modalWindow = $("#window");
  console.log(modalWindow, ' before click');
  $(modalContainer).mouseup(function(e) {
    if (e.target.id != modalWindow.attr('id') && !modalWindow.has(e.target).length) {
      modal.remove();
      body.removeClass('noscroll');
      console.log(modalWindow, ' after click');
    }
  })
}
$(document).keyup(function(e) {
  if (e.which == 27) {
    $("#modal").remove();
    body.removeClass('noscroll');
  }
  e.stopPropagation();
});
$("body").delegate('#counter', 'click', function() {
  pandaModal();
});

以下是该问题的代码示例：http://codepen.io/sanderfish/pen/QyzERM

当var modalWindow = $("#window");中openModal仍然被注释时，选择器返回空白会发生什么。代码在取消注释时有效，但仅适用于一个模态（在这种情况下为pandaModal）。

提前致谢。

Answer 1

了解如何解决今天的问题，并将其作为答案撰写。

modalContainer.html(function() {
    return modalContent;
});

在modalWindow中声明变量pandaModal后呈现。当我在上面的html()函数之后声明变量时，我发现代码确实有效。

我重写了我的代码如下。首先我声明了我的变量：

var modalContent;
var modalContainer = $("#modal-wrapper");
var body = $('body');
var modalWindow;

然后我写了.on click函数来声明应该呈现的html，以声明生成在modalWindow内的html并开始openModal函数。这看起来像这样：

$("#counter").on('click', function() {
    modalContent = "<div id='modal'><div id='window'></div></div>";
    modalWindow = $("#window");
    openModal();
    return false;
});

然后是渲染模态和闭合函数的函数。

function openModal() {

    $("#modal-wrapper").html(modalContent);
    var modal = $("#modal");
    var modalWindow = modal.children('div');

    body.addClass('noscroll');
    modal.center();

    $(modalContainer).mouseup(function(e) {
        if(e.target.id != modalWindow.attr('id') && !modalWindow.has(e.target).length) {
            modal.remove();
            body.removeClass('noscroll');
        }
    });

}

jQuery选择器返回空

1 个答案: