使用jQuery UI的对话框（“销毁”）把元素放在错误的地方？

我有一个很大的部分形式。对于每一个部分，我想补充一个小按钮“弹出对话框的”，这将是部分转换为点播一个对话框，然后（关闭对话框时），与新的输入回返回到窗体。使用jQuery UI的对话框（“销毁”）把元素放在错误的地方？

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

这是一个对话框的 “功能”（）？任何事情要做？有没有更好的方式来做到这一点W/O使用对话框（）？

2009-11-18 Sleepster

呀，这是一个'功能'......哈哈......一阵子跑回去了。这里有几个“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>

来源

2009-11-18 03:45:15 btelles

也许别人添加一些代码就很难说哪里/为什么你的代码可能会失败

你可能只是不喜欢这样或类似的

<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/

来源

2009-11-18 02:39:35 jitter

这为我工作：

克隆对话框
初始化克隆对话框（所以页面上的原始停留）
删除克隆的对话时，我用做它

代码示例：

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

来源

2011-08-09 21:54:54 Andrew

这是真棒。这比接受答案的方法更容易。这是一个非常糟糕的“功能”，他们应该真正解决这个问题。 – Milimetric 2011-08-17 20:32:05

非常有效。只要确保你不用'id's关闭'div's。 – geowa4 2011-12-14 13:59:19

你将如何处理带ID的模态？一切工作，除非我没有触发重复关闭它。 – Mikhail 2014-02-01 07:24:57

使用jQuery UI的对话框（“销毁”）把元素放在错误的地方？

回答

相关问题