Question

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

说我想避免一遍又一遍地添加相同的元素（我只想使用一个元素，以减少重复的代码），我想我想使用JQuery以便使用单个模式并填充它在任何事件被触发时。在此示例中，我将使用按钮并单击事件。

当我单击按钮时，它应该使用click事件中提供的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

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

编辑：我添加了data属性以传递模式尺寸以及要加载的内容。

$(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>

如何填充Bootstrap模式？

1 个答案: