Question

我知道这是基本问题，但我无法解决这个问题。请帮帮我。

我试图通过点击超链接加载div的内容进入bootstrap模式。我怎么能这样做？

以下是我的代码：

<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

您可以使用此功能按点击按钮链接按顺序加载内容：

按钮：

<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文档中查看此方法：Set-Content will complain that the file is already open

问候！

如何将div加载到bootstrap模式中

1 个答案: