jQuery對話框 - 位於對話框輸入頂部的div禁用

打開一個對話框。我單擊對話框的輸入字段以打開絕對定位在對話框上的div。輸入不能與之交互。

的例子，您可以將鼠標放在輸入和鼠標光標將變爲「I」圖標。您甚至可以與絕對定位的div上的關閉錨標記進行交互。這不是一個Z指數問題。它適用於jQuery UI 1.9及更早版本。奇怪的是，在將絕對div添加到DOM之後，如果您將一個空div添加到body html的末尾（使用螢火蟲實時編輯代碼），則輸入有效。

任何想法？

由於提前，

Bontke

$('#open_dialog').click(function (event) { 

var dialog_html = '<div id="dialog_body">' + 
         '<input type="text" name="test1"/>' + 
        '</div>'; 

$(dialog_html).dialog({ 
    title: 'WTF Test', 
    height: 110, 
    width: 300, 
    modal: 'true', 
    close: function() { 
     $(this).remove(); 
     $('#test_div').remove(); 
    } 
}); 

//dialog input click 
$('input[name=test1]').click(function (event) { 
    var html = $('<div id="test_div" style="border: 1px solid red; z-index: 10000; position: absolute; left: 45%; top: 60%; width: 235px; height: 100px; background-color: blue;"><input name="foobar"/><a id="test_close" style="color: white;" href="#">close</a><br/><span style="color: white">super awesome text</span></div>'), 
     body = $(document.body); 

     if ($('#test_div').length === 0) { 
      //append div to body 
      html.appendTo(body); 
      //add close functionality to test_div 
      $('#test_close').click(function (event) { 
       event.preventDefault(); 
       //remove test_div from DOM 
       $(event.currentTarget).parent().remove(); 
      }); 
     } 
}); 
});

來源

2014-01-16 user3203064

我沒有任何解決方案，但在測試你的小提琴時，我能夠確認你的發現，並獲得了更多的數據點。我將輸入設置爲複選框，並且能夠很好地處理單擊事件。即使使用chrome調試器將文本框的狀態設置爲：focus，它也沒有獲得焦點，所以這個問題似乎是特定於鍵盤焦點的，但這就是我所擁有的。 –

的dialog_html對話框設置爲modal: 'true'這意味着它將關閉所有的頁面上的其他人。如果你刪除它，它會消除任何問題。我認爲你會得到混合的結果，因爲在jQuery創建了對話框模式之後你添加了DOM，你真的不應該能夠與第二個彈出窗口進行交互，但是它已經崩潰了。你可能想嘗試使第二個彈出式模式，或將其作爲第一個對話框的孩子，而不是追加到document.body

來源

2014-01-16 16:33:06 brryr

不幸的是，在jsfiddle中將模態設置爲false並不能解決問題。 –

將模態設置爲false並不會改變任何內容，但刪除整條線就會發生。 – brryr

Touche，做得很好。 +1。 –

很抱歉的延遲迴復，這裏是解決方案：

http://jsfiddle.net/aY9ms/5/

我希望對話框是一個模態。你是對的，添加DOM是因爲對話框的工作原理。在我的情況下，最好是添加任何HTML到對話框父母爲更好的內存清理。並調整對話框上的溢出允許該div浮動在對話框上，如我所願。

感謝您的所有反饋和幫助！

var $ = $j; 
var dialog_html = '<div id="dialog_body">' + 
         '<input type="text" name="test1"/>' + 
        '</div>'; 

$(dialog_html).dialog({ 
    title: 'WTF Test', 
    height: 110, 
    dragable: true, 
    width: 300, 
    modal: 'true', 
    close: function() { 
     $(this).remove(); 
     $('#test_div').remove(); 
    } 
}); 

//dialog input click 
$('input[name=test1]').click(function (event) { 
    var html = $('<div id="test_div" style="border: 1px solid red; z-index: 10000; position: absolute; left: 45%; top: 60%; width: 235px; height: 100px; background-color: blue;"><input name="foobar"/><a id="test_close" style="color: white;" href="#">close</a><br/><span style="color: white">super awesome text</span></div>'), 
     dialog_box = $('#dialog_body').parent(), 
     body = $(document.body); 

     //adjust css 
     dialog_box.css({'overflow': 'inherit'}); 

     if ($('#test_div').length === 0) { 
      //append div to body 
      //html.appendTo(body); 
      html.appendTo(dialog_box); 
      //add close functionality to test_div 
      $('#test_close').click(function (event) { 
       event.preventDefault(); 
       //remove test_div from DOM 
       $(event.currentTarget).parent().remove(); 
      }); 
     } 
});

來源

2014-02-10 21:01:05 user3203064

jQuery對話框 - 位於對話框輸入頂部的div禁用

回答

相關問題