Question

我有很多部分的大表格。对于每个部分，我想添加一个小按钮“Popup as Dialog”，它会将该部分转换为按需对话框，然后（当关闭对话框时）返回到具有新输入的表单。

我正在使用jQuery UI的dialog（）函数。弹出部件工作正常 - 子表单转换为对话框。但是，当我对话（“销毁”）子表单时，元素会显示回来，但是在DOM文档的末尾而不是原始位置。

这是dialog（）的“功能”吗？有什么关系吗？有没有更好的方法来使用dialog（）吗？

Answer 1

这对我有用：

克隆对话框
初始化克隆的对话框（原文保留在页面上）
完成后删除克隆的对话框

代码示例：

$('a.popup-modal').click(function(e){
    var $modal = $(this).closest('form').find('.modal').clone();
    $modal.dialog({
        autoOpen: true, 
        close: function(event, ui){
            $(this).remove();
        }
    });
});

Answer 2

是的，这是一个'特色'......哈哈......不久就跑了进来。这里有一些'gotchyas'，然后是一种真正的hackity处理它们的方式（虽然你计划有很多子表格，但效果很好）：

当你创建一个对话框时，jquery会记住它，并将它存储在一个单独的div中，然后永远不会把它放回去（是的，文档的意思是元素永远不会回到原来的位置）。
我的经验是，如果你在此之后过多地搞乱隐藏的元素，你可能会破坏未来的对话功能。最好只从新内容创建一个新的对话框（特别是如果你的应用程序中有很多这样的话......用手编写每个子表单会很快变得单调乏味）。
如果您不能重复使用div，则必须克隆它们。重命名它们（这是我在下面做的）

关闭对话框后，下面的片段“克隆”对话框的内容，重命名其id属性，然后将更改的内容附加到“sub_form_container”，从而在每次用户关闭时生成一个全新的对话框/表单对话。希望这有帮助！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <link type="text/css" href="ui.css" rel="stylesheet" />  
  <script type="text/javascript" src="j.js"></script>
  <script type="text/javascript" src='ui.js'></script>
  <script type="text/javascript">
    $(document).ready(function() {
                newDialogs(2); 
    });     
    function newDialogs(idCounter) {
      $('#d1').unbind().bind('click', function() {
        $('#d'+ idCounter.toString()).dialog({close: function(event, ui){
            var newSubForm = $('#d'+idCounter.toString()).clone();
                idCounter += 1;
                newSubForm.attr('id', 'd'+idCounter.toString()).attr('class', '').attr('style', '');
            $('#sub_form_container').append(newSubForm);
            newDialogs(idCounter);
            $('ui-dialog').remove()
          }
        });
      });
    }

  </script>

</head>
  <body>
    <h1>Element above</h1>
    <div>
      <div id='d1'>Activate dialog</div>
      <div id='sub_form_container'>
        <div id='d2'>Dialog content <input type='text' /></div>
      </div>
    </div>
    <h1>Element below</h1>
  </body>
</html>

Answer 3

也许添加一些代码，很难说出代码可能会失败的地方/原因

你可以像这样或类似的

这样做

<input id="text" name="textname" type="text">
<input
  type="button"
  value="Pop me up"
  onclick="$('#text').clone().dialog({
    modal:true,
    close: function(event, ui) {
        $('#text').val(this.value);
    }
  });"
>

检查样本http://jsbin.com/ujema/

使用jQuery UI对话框（“destroy”）将元素放在错误的位置？

3 个答案: