web-dev-qa-db-ja.com

別のページからBootstrapのモーダルコンテンツを取得する

menu.htmlというページにアンカーがあり、Lab6.htmlという別のページからのデータを表示するためにBootstrap=モーダルを取得するのに問題があります。

menu.html

<div class="collapse navbar-collapse navbar-exl-collapse">
  <ul class="nav navbar-nav" id="menu">
    <li><a href="/emplookup.html">Lookup</a></li>
    <li><a href="/modalexample.html">Modals</a></li>
    <li><a href="/Lab6.html#theModal" data-toggle="modal">Lab 6</a></li><!-- this one -->
  </ul>
</div>

Lab6.html

<div class="modal fade text-center" id="theModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">X</button>
        <h1>Lab 6</h1>
      </div>
      <div class="modal-body">
        <div class="panel panel-default">
          <div class="panel-heading text-center">
            Employee Information
          </div>
          <div class="panel-body">
            <div class="row">
              <div class="text-right col-xs-2">Title:</div>
              <div class="text-left col-xs-3" id="title"></div>
              <div class="text-right col-xs-2">First:</div>
              <div class="text-left col-xs-3" id="firstname"></div>
            </div>
            <div class="row">
              <div class="text-right col-xs-2">Phone#</div>
              <div class="text-left col-xs-3" id="phone"></div>
              <div class="text-right col-xs-2">Email</div>
              <div class="text-left col-xs-3" id="email"></div>
            </div>
            <div class="row">
              <div class="text-right col-xs-2">Dept:</div>
              <div class="text-left col-xs-3" id="departmentname"></div>
              <div class="text-left col-xs-2">Surname:</div>
              <div class="text-left col-xs-4">
                <input type="text" placeholder="enter last name" id="TextBoxLastName" class="form-control" />
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <div class="panel-footer">
            <input type="button" value="Find Employee" id="empbutton" />
            <div class="col-xs-10" id="lblstatus"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="Scripts/jquery-2.1.4.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>

私は何か間違っていますか？

javascriptjqueryhtmltwitter-bootstrapmodal-dialog
15
Corivo

更新

別のページからモーダルのコンテンツを取得しようとしている方法は正しくありません。

Bootstrapのドキュメント によると：

リモートURLが提供される場合、コンテンツはjQueryのロードメソッドを介して一度ロードされ、.modal-content divに注入されます。 data-apiを使用している場合は、代わりにhref属性を使用してリモートソースを指定できます。この例を以下に示します。

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

したがって、最初に、menu.htmlファイルを上記のコードと同様に変更する必要があります。

<li><a href="Lab6.html" data-target="#theModal" data-toggle="modal">Lab 6</a></li>

そして、Lab6.htmlページの一部はmenu.htmlページ内に存在する必要があります。例えば：

<div class="modal fade text-center" id="theModal">
  <div class="modal-dialog">
    <div class="modal-content">
    </div>
  </div>
</div>

最後に、LAB6.htmlには.modal-content内にあるコードのみが含まれます。例えば：

<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal">X</button>
  <h1>Lab 6</h1>
</div>
<div class="modal-body">
  <div class="panel panel-default">
    <div class="panel-heading text-center">
      Employee Information
    </div>
    <div class="panel-body">
      <div class="row">
        <div class="text-right col-xs-2">Title:</div>
        <div class="text-left col-xs-3" id="title"></div>
        <div class="text-right col-xs-2">First:</div>
        <div class="text-left col-xs-3" id="firstname"></div>
      </div>
      <div class="row">
        <div class="text-right col-xs-2">Phone#</div>
        <div class="text-left col-xs-3" id="phone"></div>
        <div class="text-right col-xs-2">Email</div>
        <div class="text-left col-xs-3" id="email"></div>
      </div>
      <div class="row">
        <div class="text-right col-xs-2">Dept:</div>
        <div class="text-left col-xs-3" id="departmentname"></div>
        <div class="text-left col-xs-2">Surname:</div>
        <div class="text-left col-xs-4">
          <input type="text" placeholder="enter last name" id="TextBoxLastName" class="form-control" />
        </div>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <div class="panel-footer">
      <input type="button" value="Find Employee" id="empbutton" />
      <div class="col-xs-10" id="lblstatus"></div>
    </div>
  </div>
</div>

あなたのために作成したplnkr を見てください。

31
Buzinas

Bootstrap 4を使用している場合、受け入れられた答えは機能しないことに注意してください。これは Bootstrapのドキュメント についてremoteオプションについて：

このオプションはv3.3.0から非推奨であり、v4で削除されました。代わりに、クライアント側のテンプレートまたはデータバインディングフレームワークを使用するか、jQueryを呼び出すことをお勧めします自分をロードします。

リモートURLが提供される場合、コンテンツはjQueryのloadメソッドを介して一度ロードされ、_.modal-content_ divに注入されます。 data-apiを使用している場合は、代わりにhref属性を使用してリモートソースを指定することもできます。この例を以下に示します。

_<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
_

動作させるには、まずリンクから_data-target_および_data-toggle_属性を削除します。 href属性はそのままにしておくことができます。

_<li><a href="Lab6.html" class='li-modal'>Lab 6</a></li>
_

JQueryを使用すると、クリックリスナーを_<a>_要素に追加できますが、href属性で示されるページに直接移動したくないので、preventDefault()を使用します。 jQueryの load メソッドを使用するだけで、_lab6.html_ページのコンテンツを_modal-content_にロードできます。

_$('.li-modal').on('click', function(e){
      e.preventDefault();
      $('#theModal').modal('show').find('.modal-content').load($(this).attr('href'));
    });
_

ここに完全な例

11
Csaba