Question

这是我的设置：

<td>
    <div style="width:100px;height:30px; background:#009814; border:medium solid; border-color:#fff" onclick="showPopup(this)"> </div>
    <div style="display:none" title="Indicators"><input type="checkbox"/> Indicators go here </div>
</td>

function showPopup(elem) {
    var el = $(elem);
    var div = $(el.siblings()[0]);
    var populDiv = div.show();
    var dialog = populDiv.dialog({
        closeOnEscape: true,
        beforeClose: function (event, ui) {
            //update div somehow
        }
    });
}

我打开一个带有隐藏div的对话框，因为它是内容，div从td中删除并放在对话框中。我的问题是如何保持选中/取消选中复选框？

Answer 1

解决方案非常棘手，因为您需要克隆原始div，显示它，然后在关闭对话框之前将其替换为对话框内容，并再次隐藏它。

function showPopup(elem) {
    var orig = $($(elem).siblings()[0]);
    var populDiv = $('<div>').append(orig.clone().show());
    var dialog = populDiv.dialog({
        closeOnEscape: true,
        beforeClose: function(event, ui) {
            orig.replaceWith(populDiv.children().eq(0).hide());
        }
    });
}

演示： http://plnkr.co/edit/46Bn7Y1nRelghNPKMDkz?p=preview

Answer 2

你基本上需要删除隐藏的元素并将其移动到对话框中，然后关闭重新添加元素的位置：

function showPopup(elem) {
  // retrieve the hidden element after the clicked div
  var el = $($(elem).siblings()[0]);
  // append it to the #dialog container, show the content and display the dialog()
  var dialog = $('#dialog').html('').append(el.show()).dialog({
    closeOnEscape: true,
    beforeClose: function (event, ui) {
        // hide the element again and re-add it behind the clickable element
        el.hide().insertAfter($(elem));
    }
  });
}

小提琴：http://jsfiddle.net/Moonbird_IT/r6xu01wx/1/

如何更新对话框小部件中打开的div？

2 个答案: