Question

默认情况下durandal消息框框如下所示：并命名为： messageBox.html

<div class="messageBox">
    <div class="modal-header">
        <h3 data-bind="html: title"></h3>z
    </div>
    <div class="modal-body">
        <p class="message" data-bind="html: message"></p>
    </div>
    <div class="modal-footer" data-bind="foreach: options">
        <button class="btn" data-bind="click: function () { $parent.selectOption($data); }, html: $data, css: { 'btn-primary': $index() == 0, autofocus: $index() == 0 }"></button>
    </div>
</div>

现在在这里，我想在标题右侧放置X按钮：

<div class="modal-header">
            <h3 data-bind="html: title"></h3>
            <a>X</a>
        </div>

所以我把X放在modal-header中，但是我无法弄清楚应该在哪里写什么代码，所以当用户点击X时，弹出窗口将会关闭。

messageBox.js是这样的：

define(function() {
    var MessageBox = function(message, title, options) {
        this.message = message;
        this.title = title || MessageBox.defaultTitle;
        this.options = options || MessageBox.defaultOptions;
    };

    MessageBox.prototype.selectOption = function (dialogResult) {
        this.modal.close(dialogResult);
    };

    MessageBox.defaultTitle = '';
    MessageBox.defaultOptions = ['Ok'];

    return MessageBox;
});

Answer 1

您需要对功能关闭模式进行敲除绑定

<div class="modal-header">
     <h3 data-bind="html: title"></h3>
     <span data-bind="click: function () { $parent.close(); }>X</span>
</div>

虽然您的JS文件看起来像：

define(function() {
    var MessageBox = function(message, title, options) {
        this.message = message;
        this.title = title || MessageBox.defaultTitle;
        this.options = options || MessageBox.defaultOptions;
    };

    MessageBox.prototype.selectOption = function (dialogResult) {
        this.modal.close(dialogResult);
    };

    MessageBox.prototype.close = function () {
        this.modal.close();
    };

    MessageBox.defaultTitle = '';
    MessageBox.defaultOptions = ['Ok'];

    return MessageBox;
});

顶部的durandal messagebox关闭按钮

1 个答案: