我将如何填充 Bootstrap 模式？

Question

我正在尝试学习使用 Bootstrap 和 JQuery。对于我目前的项目，我试图让用户与 Modals 进行交互。我注意到 Bootstrap 框架提供了其特定模式的使用。我必须了解如何实现这一点，直到出现这种模式。

假设我想防止一遍又一遍地添加相同的元素（我只想使用一个元素来减少重复代码），我想我想使用 JQuery 来使用单个模式并填充它在任何事件被触发。对于这个例子，我将使用按钮和点击事件。

当我单击按钮时，它应该使用单击事件中提供的 HTML 填充分配给按钮的模式。我知道有几种方法可以实现这一点，例如使用 AJAX 检索包含 HTML 的视图或使用 JQuery hide()、clone() 和 show() 函数：

$(document).ready(function() {
  //On initialization:
  //Store modal initial values so they can be reset when closed:
  let modalMediumInit = $(".modal.bs-example-modal-md").html();
  let modalLargeInit = $(".modal.bs-example-modal-lg").html();
  let modalSmallInit = $(".modal.bs-example-modal-sm").html();

  //On modal close:
  $(".modal.bs-example-modal-md").on("hidden.bs.modal", function() {
    //Reset modal to initial values:
    $(".modal.bs-example-modal-md").html(modalMediumInit);
  });
  $(".modal.bs-example-modal-lg").on("hidden.bs.modal", function() {
    //Reset modal to initial values:
    $(".modal.bs-example-modal-lg").html(modalLargeInit);
  });
  $(".modal.bs-example-modal-sm").on("hidden.bs.modal", function() {
    //Reset modal to initial values:
    $(".modal.bs-example-modal-sm").html(modalSmallInit);
  });

  $("#my-element").hide();

  //On interaction:
  $(".controls").on("click", "#my-control", function() {
    //Populate modal .modal-body element...    

    //Currently using JQuery:
    let html = $("#my-element").clone();
    $(".modal.modal.bs-example-modal-lg .modal-content .modal-body").html(html);
    $(".modal.modal.bs-example-modal-lg .modal-content .modal-body #my-element").show();

    //Or (AJAX might return some HTML and set it into the html variable):
    html = "<p>A very long string containing all my required html</p>";
    //$(".modal.modal.bs-example-modal-lg .modal-content .modal-body").html(html); //<-- Uncomment following to see effect.
  });
});

#my-element button {
  margin-top: 2px;
  margin-bottom: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="my-element">
  <div class="row">
    <div class="col-xs-12">
      <button class="btn btn-primary btn-block">
        Foo
      </button>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <button class="btn btn-primary btn-block">
        Foo
      </button>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <button class="btn btn-primary btn-block">
        Foo
      </button>
    </div>
  </div>
</div>

<div class="controls">
  <button id="my-control" type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">
    Populate and open...
  </button>
</div>
<br />
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-md">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal bs-example-modal-md fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal bs-example-modal-lg fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal bs-example-modal-sm fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

JSFiddle

每当我使用 JQuery 方法时，提供的用于填充模式的元素将在页面加载时加载（我注意到这个元素也会出现一小段时间，然后它会被提供的 JQuery 代码隐藏，这对我来说似乎不需要）。这会是填充 Bootstrap 模式的错误解决方案吗？我最近读了很多关于 AJAX 的文章，在这种情况下我应该利用它来将 HTML 加载到我的模态中吗？

Answer 1

我已经修改了您的代码并创建了一个快速演示。请检查以下代码。

编辑：我添加了数据属性来传递模态大小以及要加载的内容。

$(document).ready(function() {  
	//On initialization:
  //Store modal initial values so they can be reset when closed:
  let modalContentInit = $(".bs-example-modal-md .modal-body").html();
  
  //On modal close:
  $(".modal.bs-example-modal-md").on("hidden.bs.modal", function () {
    //Reset modal to initial values:
    $("#myModal .modal-body").html(modalContentInit);
    $('#myModal .modal-dialog').attr('class','modal-dialog');
  });
  
  $('#myModal').on('show.bs.modal',function(e){
    var button = $(e.relatedTarget);
    var modalContentClass = button.data('content');
    var modalSize = button.data('size') ? ' modal-' + button.data('size') : '';
    $('#myModal .modal-dialog').attr('class','modal-dialog' + modalSize);
    $('#myModal .modal-body').html($(modalContentClass).clone());
    $('#myModal .modal-body ' + modalContentClass).removeClass('hide');
  });
  
});

.my-element button {
  margin-top: 2px;
  margin-bottom: 2px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="my-element my-element-foo hide">
  <div class="row">
    <div class="col-xs-12">
      <button class="btn btn-primary btn-block">
        Foo
      </button>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <button class="btn btn-primary btn-block">
        Foo
      </button>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <button class="btn btn-primary btn-block">
        Foo
      </button>
    </div>
  </div>
</div>

<div class="my-element my-element-bar hide">
  <div class="row">
    <div class="col-xs-12">
      <button class="btn btn-primary btn-block">
        Bar
      </button>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <button class="btn btn-primary btn-block">
        Bar
      </button>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <button class="btn btn-primary btn-block">
        Bar
      </button>
    </div>
  </div>
</div>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-content=".my-element-foo">
  Modal 1
</button>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-content=".my-element-foo" data-size="sm">
  Modal 1 small
</button>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-content=".my-element-foo" data-size="lg">
  Modal 1 large
</button>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-content=".my-element-bar">
  Modal 2
</button>

<!-- Modal -->
<div class="modal bs-example-modal-md fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>