使用jQuery UI的对话框("destroy")将元素放在错误的位置？

Question

使用jQuery UI的对话框("destroy")将元素放在错误的位置？

Sle*_*ter 5 forms jquery dialog popup

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

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

这是dialog()的"功能"吗？有什么关系吗？有没有更好的方法来使用对话框()？

Answer 1

And*_*rew 14

这对我有用:

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

代码示例:

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

Run Code Online (Sandbox Code Playgroud)

这太棒了.它比接受的答案方法更容易.这是一个非常糟糕的"功能",他们应该真正解决这个问题. (2认同)

Answer 2

bte*_*les 8

是的,这是一个"功能"......哈哈......不久就跑了进来.这里有一些'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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	15 年，9 月前
查看次数：	7678 次
最近记录：	14 年，1 月前