自动显示带有敲出功能的twitter引导模式对话框
自动显示带有敲出功能的twitter引导模式对话框
提问于 2013-02-04 17:39:49
当我从列表中选择一个项目时，我需要在单页应用程序中显示编辑项目的模式对话框。
问题:我使用了visible绑定，但后来发现它很麻烦，而且不能正常工作，因为它只显示对话框，没有覆盖，淡入淡出(如果有的话)不起作用。
Html：
<div class="modal hide fade" data-bind="visible:selectedItem, with:selectedItem">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 data-bind="text:name"></h3>
</div>
<div class="modal-body">
<form data-bind="submit:deselectItem">
<!-- editor for item here -->
</form>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-bind="click:deselectItem">Close</a>
</div>
</div>它的模型是一个简单的对象，带有observableList、obervable和将selectedItem设置为null的deselectItem函数。
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-02-04 17:39:49
据我所知，(可能)最好的方法是创建一个ko绑定处理程序，我称之为showModal
ko.bindingHandlers.showModal = {
init: function (element, valueAccessor) {},
update: function (element, valueAccessor) {
var value = valueAccessor();
if (ko.utils.unwrapObservable(value)) {
$(element).modal('show');
// this is to focus input field inside dialog
$("input", element).focus();
}
else {
$(element).modal('hide');
}
}
};用法如下：
<div class="modal hide fade" data-bind="showModal:selectedItem, with:selectedItem">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 data-bind="text:name"></h3>
</div>
<div class="modal-body">
<form data-bind="submit:deselectItem">
<!-- editor for item here -->
</form>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-bind="click:deselectItem">Close</a>
</div>
</div>Stack Overflow用户
发布于 2013-11-01 00:07:31
如果应用以下模式，它会变得容易得多：
<form class="modal hide fade" data-bind="visible:selectedItem, with:selectedItem, submit:deselectItem">
...
</form>这样，您就可以在提交处理程序中重新获得表单，并在那里正确地关闭它：
deselectItem = function(form){
...
$(form).modal('hide');
}Stack Overflow用户
发布于 2014-06-30 19:34:08
我已经为引导模式使用了这个自定义绑定处理程序。另外，在模式中，我添加了两个时刻日期选择器。但是当我使用这个绑定处理程序时，在click事件上模态是可见的，但是datepicker div也是可见的
如果我不使用这个并使用
$('.classname_of_bootstrap_modal').modal('show')该模式工作得非常好。
所以，我猜在使用这个绑定处理程序时有一些问题，并且不能获得它。
我对此进行了评论
$("input", element).focus();执行此操作时，datepicker div不会自动显示。当我单击它们时，它们是可见的，但删除它的问题是，如果我单击其中一个datepicker，它将关闭引导模式。但它不应该关闭它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14683953
复制相关文章
相似问题