如何將div加載到引導模式

Question

我知道這是基本問題，但我無法解決。 請幫幫我。

我試圖在單擊超鏈接時將div的內容加載到引導程序模式中。 我該怎么做？

下面是我的代碼：

<a id="myModalId" href="#">myLink1</a>
<a id="myModalId" href="#">myLink2</a>

我的模態結構：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false" >
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>

              </div>
              <div class="modal-body">
                <!-- I would like my div content here -->
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>

這是我的div結構：

<div>
<div id="d1" style="display:none">
    div1 content                    
</div>
<div id="d2" style="display:none">
    div 2 content   
</div>

和模式調用功能：

 $(document).ready(function(){
                $('#myModalId').click(function(){
                    $('#myModal').modal('show');
                });
            });

。 這樣的鏈接很少，我希望為每個鏈接僅使用單個模式加載一個單獨的div。 我們可以做到嗎？

Answer 1

U可以使用此功能通過單擊的按鈕鏈接按順序加載內容：

紐扣：

<a href="#myModalId" data-toggle="modal" data-content="d1">myLink1</a>
<a href="#myModalId" data-toggle="modal" data-content="d2">myLink2</a>

模態：

<div class="modal fade" id="myModalId" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false" >
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>

              </div>
              <div class="modal-body">
                  <div id="d1" class="display-none">
                     div1 content                    
                  </div>
                  <div id="d2" class="display-none">
                     div 2 content   
                  </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>

jQuery：

$('#myModalId').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget), // here is the button clicked
      content = button.data('content'), // here you can get information of the button
      modal = $(this); // Here is the modal

  modal.find('#'+content).slideDown('fast');
});

CSS：

.display-none{
    display: none;
}

您可以在boostrap文檔中查看此方法： http ://getbootstrap.com/javascript/#modals-related-target

問候！