0

モーダル ボックスに angularstrap を使用していますが、テンプレートに親の .modal コンテナーがないことに気付きました。それが私の質問につながります。そのモーダル ボックス ラッパーのクラスまたは ID を追加するアクセス権がない場合、異なるモーダル ボックスを異なるスタイル (サイズを含む) にするにはどうすればよいですか?

既に存在するクラスのスタイルしか設定できないようです。つまり、すべてのスタイルがすべてのモーダル ボックスに適用されます。これは、スタイルがまったく異なるさまざまなモーダル ボックスがある場合には適していません。

Angularjs

   <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h3>Modal header</h3>
    </div>
    <div class="modal-body">

    </div>
    <div class="modal-footer">
      <button type="button" class="btn" ng-click="dismiss()">Close</button>
      <button class="btn btn-primary" ng-click="modal.saved=true;dismiss()">Save changes</button>
    </div>

ブートストラップの例:

<div class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…&lt;/p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

Angularstrap のモーダル セクション: LINK

4

2 に答える 2

2

最近プロジェクトに取り組んでいるときに、カスタム css を追加するために、テンプレートの既存のモーダル ダイアログ ボックスに ng-class を追加しました。

 <div class="modal-dialog" ng-class="{'wide-modal':modal.wide === true}">

カスタムクラスのCSSを追加しました

.wide-modal {
     width: 85%;
}

そして、モーダルを起動してカスタムサイズのモーダルが必要なときはいつでも、スコープに変数を追加しました

modal.wide = true;

モーダルのスクロール バー

モーダルコンテンツがモーダルには多すぎる場合に備えて、この css を .modal 本体に追加してスクロールを追加しました

.modal-body {
    max-height: 420px;
    overflow-y: auto;
}
于 2014-03-24T23:01:27.893 に答える
0

コントローラーの各ロードで、モーダル内に含まれる要素の親に jquery 変更を作成することでそれを行いました。そうすれば、次のようなモーダル内の要素を介してコントローラーがロードされたときに、各汎用モーダルをターゲットにすることができます。

setTimeout(function(){
      $('#login').parent().css({
        "width":"562px",
        "margin-left":"-281px",
        "overflow":"auto",
        "border-radius":"7px"
      });
    },50);

DOM をロードする角度時間を与えるためにタイムアウトになっています。私が考えることができる他の解決策には、ブートストラップUIライブラリの変更が含まれます。クラスまたはIDをモーダルに渡すことができるはずですが、これは機能します。

于 2014-11-07T09:36:38.400 に答える