Twitter-Bootstrap模态绑定处理程序，如果单击背景，则敲除会中断

问题描述

当我用以下命令单击时，我试图禁用背景关闭模态:

I'm trying to disable the backdrop from closing the modal when clicked with the following:

ko.bindingHandlers.showModal = {
    init: function (element, valueAccessor) {
    },
    update: function (element, valueAccessor) {
        var value = valueAccessor();
        if (ko.utils.unwrapObservable(value)) {
            $(element).modal({ backdrop: 'static', keyboard: true });
            // this is to focus input field inside dialog
            $("input", element).focus();
        }
        else {

            $(element).modal('hide');
        }
    }
};

据我了解，$(element).modal({ backdrop: 'static', keyboard: true });应该实现我的追求.但是，如果我单击背景，模式仍然会关闭，实际上会中断显示"按钮.我在这里做错了什么?

From what I understand, $(element).modal({ backdrop: 'static', keyboard: true }); should achieve what I'm after. But if I click on the backdrop the modal still closes though, and in fact breaks the "show" button. What am I doing wrong here?

小提琴: http://jsfiddle.net/PTSkR/175/

推荐答案

您的问题是您试图多次初始化模态.

You problem is that you are trying to initialize your modal multiple times.

设置backdrop: 'static'的初始化逻辑应该进入init函数(仅调用一次)，并且需要在update函数中调用.modal('show')和.modal('hide'):

The initialization logic where you set backdrop: 'static' should go into the init function (which is called only once) and you need to call .modal('show') and .modal('hide') in your update function:

ko.bindingHandlers.showModal = {
    init: function (element, valueAccessor) {
        $(element).modal({ backdrop: 'static', keyboard: true, show: false });
    },
    update: function (element, valueAccessor) {
        var value = valueAccessor();
        if (ko.utils.unwrapObservable(value)) {
            $(element).modal('show');
            $("input", element).focus();
        }
        else { 
            $(element).modal('hide');
        }
    }
};

演示 JSFiddle .

这篇关于Twitter-Bootstrap模态绑定处理程序，如果单击背景，则敲除会中断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！