3

ここから説明されているAngularJs UI Bootstrapのモーダルを使用しています

ページの特定の部分 (特定の DIV など) にモーダルを表示し、フルスクリーンではなくコンテナーのみを黒くしたい。

これが例です。水色の部分だけモーダルを表示させたいです( id="chat") http://plnkr.co/edit/tEnmm7RDOiB6sag4ailo?p=preview

4

1 に答える 1

4

AngularJs UI Bootstrap によって作成されたすべてのモーダルが html 本体に発生するため、通常は不可能です。そうは言っても、常に方法があります:)

免責事項: 以下は一種のハックです。独自のディレクティブを作成することを強くお勧めします。

Modal コンポーネントは、1 つはresultと呼ばれ、もう 1 つはopen と呼ばれる 2 つの Promise を公開します。私たちの場合、モーダルがいつ開かれて表示されるかを知るために 2 番目のものを使用します。そこから、次のようにモーダルを別の div 要素に追加できます。

    var modalInstance = $modal.open({
        windowClass : 'uniqueClassName', //use to easily find the dom element
        templateUrl: 'modal.html',
        controller: ChatModalController
    });
    modalInstance.opened.then(function(){
      $timeout(function(){
        var modalDom = document.querySelector('.uniqueClassName'); // The modal
        var modalBackDom = document.querySelector('.modal-backdrop'); //The backdrop
        var chatDom = document.querySelector('#chat');

        chatDom.appendChild(modalDom); //Move modal & backdrop inside chat div
        chatDom.appendChild(modalBackDom);

      });
    })

新しいシナリオに対応するために、次のようないくつかの css クラスも追加/変更する必要があります。

  #chat {position:relative;}
  #chat .modal,
  #chat .modal-backdrop{
    position : absolute;
  }

最後に、ここで動作する Plunker を確認できます。

于 2013-09-24T19:42:57.293 に答える