击倒模态窗口只打开一次

Question

我有一个bootstrap模态窗口，在按钮点击时打开。一切正常，除了一件事：当我点击outmodal空间 - 模态窗口关闭但我可以再次打开按钮点击。如果我关闭按钮关闭模态 - 它运作良好。

更新：当我使用＆＃39; Esc＆＃39;关闭模式时键盘 - 行为与outmodal click相同。

---

HTML

<button data-bind="click: function () { $root.showLogModal(); }" title="Show Logs" class="btn btn-large btn-info">Show Logs</button>

<div data-bind="bootstrapLogModal: logModal" tabindex="-1" role="dialog"></div>

自定义模板

<script id="showLogModal" type="text/html">
<div class="modal-header">
    <button type="button" class="close" data-bind="click: close" aria-hidden="true">&times;</button>
    <h3>Logs</h3>
</div>
<div class="modal-body">
    <div class="alert alert-info">
      Some Content
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn" data-bind="click: close">Close</button>
</div>

JS

function ViewModel() {
    var self = this;

    self.logModal = {
        show: ko.observable(false),

        onClose: function () {
        },
        onAction: function () {
        }
    };

    self.showLogModal = function () {
        self.logModal.show(true);
    };
}

$(function () {
    var viewModel = new ViewModel();

    ko.bindingHandlers.bootstrapLogModal = {
        init: function (element, valueAccessor, allBindingsAccessor, data, bindingContext) {
            var props = valueAccessor(),
                vm = bindingContext.createChildContext(data);
            ko.utils.extend(vm, props);
            vm.close = function () {
                vm.show(false);
                vm.onClose();
            };
            vm.action = function () {
                vm.onAction();
            };
            ko.utils.toggleDomNodeCssClass(element, "modal hide fade large", true);
            ko.renderTemplate("showLogModal", vm, null, element);
            var showHide = ko.computed(function () {
                $(element).modal(vm.show() ? 'show' : 'hide');
            });
            return {
                controlsDescendantBindings: true
            };
        }
    };

    ko.applyBindings(viewModel);

});

---

http://jsfiddle.net/tLT6d/这里是Live示例。

Answer 1

这是预期的行为，如果您想在单击外部区域时阻止模式关闭，请将backdrop属性设为'static'。

Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.

更新

我不知道你为什么要将bootstrap模式重写为knockout，但是为了让你的代码在没有关闭外部区域时关闭模态的情况下工作。 只需在绑定处理程序中添加这行代码

ko.renderTemplate("showLogModal", vm, null, element);
// adds new code
$(element).modal({ backdrop: 'static', show: false });
var showHide = ko.computed(function () {
   $(element).modal(vm.show() ? 'show' : 'hide');
});

更新2

要修复初始代码以执行正确的关闭，在单击外部区域时，附加隐藏的事件处理程序并调用相关的close方法。

// adds new code
$(element).on("hidden.bs.modal", function(){
   vm.close();
});
var showHide = ko.computed(function () {
   $(element).modal(vm.show() ? 'show' : 'hide');
});