1

プロジェクトでデュランダルとホット タオル テンプレートを使用していますが、非常に単純なモーダル ダイアログが表示されないという問題があります。

これが私のコードです：

app.showMessage('Test Message');

ダイアログが DOM に追加されます。

<div class="modalHost" style="z-index: 1002; opacity: 1;">
  <div class="messageBox" data-view="durandal/messageBox" data-active-view="true" style="margin-top: -84.5px; margin-left: -895.5px;">
    <div class="modal-header">
        <h3 data-bind="html: title">Bleh</h3>
    </div>
    <div class="modal-body">
        <p class="message" data-bind="html: message">Test Message</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>
</div>

ダイアログが追加されましたが、モーダルとしてレンダリングされていません。それは私のページの一番下に追加されるだけです（下に表示）。

モーダルの表示方法

私が間違っていることを誰かが知っていますか？テンプレートを使っているのでスタイルシートの問題かと思いましたが、bootstrapのサイトのbootstrap.jsとbootstrap.cssの最新版を使っても解決しません。

更新 1

ブートストラップ チュートリアルの HTML をビューにコピーして [デモ モーダルを起動] ボタンをクリックすると、ダイアログが正しく開きます。

<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…&lt;/p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>
4

1 に答える 1

1

nuget を使用して durandal をバージョン 1.2.0 にアップグレードすると、durandal.css ファイルが削除されたことが判明しました。リポジトリからファイルを復元したところ、できあがりです!

ワーキングモーダル

于 2013-05-24T01:28:43.193 に答える