我在模态内的面板上有一个 wicket Bootstrap DateTextField。当点击显示日期选择器时，日期选择器附加到根页面，而不是模态页面。
这导致了一个问题:如果不向日期选择器添加一些 z-index，我就无法在模态顶部看到它。
当我从选择器中模糊时，它应该关闭。不知何故，由于选择器不是模态的子项，如果在模态外部单击，则单击外部日期选择器只会将其关闭。模态内部没有任何反应。
我可以通过自动关闭来调整它，但是当您转到输入并手动使用退格键清除值时，无法通过单击模态内的某处来关闭日期选择器。
一些 html 来说明:
<html>
<panel>
<modal>
<input>datefield is here</input>
</modal>
<panel>
<datepicker comes here>
</html>
如何将日期选择器附加到模态，或者以其他方式解决模态内的模糊问题？
我试图为面板附加一个隐藏日期选择器的点击事件，但它在打开时立即隐藏了日期选择器。
编辑:
虽然 html 被人为地移动到那里并正确放置在 DOM 树中，但点击模式没有任何作用。不过，感谢@Gavriel 关于在 DOM 元素之间移动内容的洞察力。
编辑2:
重现情况的代码:
class MyPanel extends Panel {
DateTextField field = new DateTextField("foo");
(...)
add(field);
}
class MyPage extends WebPage {
(...)
ModalWindow modal = new ModalWindow("modal");
modal.add(new MyPanel());
(...)
}
html for the panel, containing the dateTextField
<html>
..
<input wicket:id="foo"></input>
..
</html>
正如您从代码片段中看到的那样，java 代码生成了 jQuery 部分。
编辑3:
我说的是这个生物:
编辑4:
嗯.. 我在 Javascript 中添加了一个模糊事件监听器在模态输入中，但那个模糊甚至不起作用。所以事实证明，手头真正的问题是如何在模态内进行 onblur 工作。因为那是坏掉的!!
编辑5:
抱歉，不能摆弄。从 Edit3 中，您可以看到我用于选择器的来源，我真正称之为这个功能:
protected CharSequence createScript(final DateTextFieldConfig config) {
return $(this).chain("datepicker", config).get();
}
它在 java 类中，所以根本不是 JavaScript，尽管语法看起来很相似。根据我的理解，fiddles 内部没有 java 代码。 Wicket 需要 java 部分，我对此感到抱歉。
对于 fiddle 提问者，我在这个 fiddle 上发现了类似的情况:http://jsfiddle.net/VytfY/227/ - 工作 100% 正常，我在这里提到的类似技术，对我的问题没有用。
上次编辑:
$('html').on('click',function(e){
if(e.target.className.indexOf('datepicker') == -1 &&
e.target.className != 'next' && e.target.className != 'prev' &&
e.target.className != 'year' && e.target.className != 'month'){
if ($('.datepicker').get(0) != undefined){
$('.datepicker').get(0).remove();
}
}
});
感谢@Mathew，你让我度过了愉快的一天，以上就是它的结局。我向输入元素添加了一个 datepickerContainer 类，因此单击它不会隐藏选择器。
谢谢各位，大功告成!
还有一个:对于IE，使用:
var canvas = $('.datepicker').get(0);
canvas.parentNode.removeChild(canvas);
而不是直接删除。 删除 尚不支持，即使是 IE11。
最佳答案
想法是移动由 datepicker 创建的 div。
使用http://api.jqueryui.com/datepicker/#option-beforeShow你可以看到一个例子，它是如何在一个稍微不同的用例中使用的:How to add a custom class to my JQuery UI Datepicker
当你向 DOM 追加一个已经在 DOM 中的元素时，它会从原来的位置移除，换句话说，如果你使用 $("#dst").append("#src") ，然后 src 元素被移动到 dst。
更新:我认为有一种更直接的方法:您提供要使用的 div 的 ID。这样您就可以在模态对话框中包含此 div。
$("#button").on('click', function(){
$("#datepicker").datepicker();
});<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<button id="button">choose date</button>
<div id="datepicker"></div>
<div>footer</div>关于java - Bootstrap(实际上是 JQuery)DatePicker 不会隐藏在 Wicket 模式中的模糊中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35008515/