Hidden app.showMessage()

[Marcos Cobeña Morián]

Hello,

 

Calling app.showMessage("Hello") within a viewmodel's return function doesn't show anything. However, the modal is right there on the HTML but for me seems like the style applied to the messageBox div puts it out of the viewport:

 

<div class="messageBox" data-view="durandal/messageBox" data-active-view="true" style="margin-top: -52px; margin-left: -952px;">
    <div class="modal-header">
        <h3 data-bind="html: title">please</h3>
    </div>
    <div class="modal-body">
        <p class="message" data-bind="html: message">Please</p>
    </div>
    <div class="modal-footer" data-bind="foreach: options">
        <button class="btn btn-primary autofocus" data-bind="click: function () { $parent.selectOption($data); }, html: $data, css: { 'btn-primary': $index() == 0, autofocus: $index() == 0 }">Ok</button>
    </div>
</div>

 

Does it make any sense?

 

Cheers, and thanks in advance,

 

Marcos

[Alain Méreaux]

I got the same problem yesterday.

It probably comes from your app CSS styles conflicting with the default context of the modalDialog js.

On my side the prob was coming from the margin setup occuring in the afterCompose function of the default context.

I wanted to use the native Bootstrap 2.3.1 modal system.

I ended creating a new context to answer my needs and resolve the CSS conflict issues.

Here is an example :

NEW MODAL CONTEXT CALL

return app.modalDialog.showBootstrapModal('shared/messageBox', {
                    message: 'You have unsaved data. Are you sure you want to leave this page?',
                    title: 'Unsaved Data',
                    options: ['Yes', 'No']
                });

NEW CONTEXT INITIALIZATION (mine is in main.js)

modalDialog.addContext('bootstrapModal', {
        blockoutOpacity: .2,
        removeDelay: 200,
        addHost: function (modal) {
            var body = $('body');
            var host = $('<div class="modalHost"></div>')
                .appendTo(body);
            var blockout = $('<div class="modal-backdrop"></div>')
                .appendTo(body);
 
 
 
            modal.host = host.get(0);
            modal.blockout = blockout.get(0);
 
            if (!modalDialog.isModalOpen()) {
                modal.oldBodyMarginRight = $("body").css("margin-right");
 
                var html = $("html");
                var oldBodyOuterWidth = body.outerWidth(true);
                var oldScrollTop = html.scrollTop();
                $("html").css("overflow-y", "hidden");
                var newBodyOuterWidth = $("body").outerWidth(true);
                body.css("margin-right", (newBodyOuterWidth - oldBodyOuterWidth + parseInt(modal.oldBodyMarginRight)) + "px");
                html.scrollTop(oldScrollTop); // necessary for Firefox
                $("#simplemodal-overlay").css("width", newBodyOuterWidth + "px");
            }
        },
        removeHost: function (modal) {
            $(modal.host).css('opacity', 0);
            $(modal.blockout).css('opacity', 0);
 
            setTimeout(function () {
                $(modal.host).remove();
                $(modal.blockout).remove();
            }, this.removeDelay);
 
            if (!modalDialog.isModalOpen()) {
                var html = $("html");
                var oldScrollTop = html.scrollTop(); // necessary for Firefox.
                html.css("overflow-y", "").scrollTop(oldScrollTop);
                $("body").css("margin-right", modal.oldBodyMarginRight);
            }
        },
        afterCompose: function (parent, newChild, settings) {
            var $child = $(newChild);
            var width = $child.width();
            var height = $child.height();
 
            $child.addClass('in');
 
            $(settings.model.modal.host).css('opacity', 1);
 
            if ($(newChild).hasClass('autoclose')) {
                $(settings.model.modal.blockout).click(function () {
                    settings.model.modal.close();
                });
            }
 
            $('.autofocus', newChild).each(function () {
                $(this).focus();
            });
        }
    });

MessageBox.html (Bootstrap 2.3.1 compatible)

<div class="modal fade">
    <div class="modal-header">
        <h3 data-bind="html: title"></h3>
    </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>

Note sure if this is the best way to go but it solved my prob.

[Kirill Grishin]

Hi,

for those how will encounter similar problem in future, know that durandal.css contains some styles (e.g. .modalHost) which make windows appear in the center of a window. If you do not include durandal.css, you'll have to provided your own styles to make it work.

At least for me including durandal.css back solved the problem.

Kirill

среда, 24 апреля 2013 г., 16:58:26 UTC+9 пользователь Marcos Cobeña Morián написал: