使用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的對話框（「銷燬」）把元素放在錯誤的地方？

回答

相關問題